javascript - Jquery点击事件没有被触发

Question

一直在尝试在我的网站页面上执行 DIV 隐藏显示。

它在纯 JavaScript 中运行良好，但注意到在移动设备上模拟时它不起作用。经过一番研究后，我将代码更改为以下内容，其中有什么问题吗？

<script>
    $(document).ready(function() {
        var portfolioDiv = document.getElementById('portfolio');
        var resultsDiv = document.getElementById('results');

        var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
        var resultsBtn = document.getElementById('RenderResults_Btn');
        //portfolioBtn.onclick = function () resultsBtn.onclick = function ()
        $('#portfolioBtn').on('click touchstart', function() {
            resultsDiv.setAttribute('class', 'col-md-9 hidden');
            portfolioDiv.setAttribute('class', 'col-md-9 visible');
        });

        $('#resultsBtn').on('click touchstart', function() {
            portfolioDiv.setAttribute('class', 'col-md-9 hidden');
            resultsDiv.setAttribute('class', 'col-md-9 visible');
        });
    });
</script>

这是我的导航栏堆栈，其中两个选项充当按钮

<div class="col-md-3 col-sm-12 col-xs-12">
    <br />
    <ul class="nav nav-stacked">
        <li style="background-color: lightgreen ; color:black;font-weight:bold"><a href="#" id="RenderPortfolio_Btn">Introduction</a>
        </li>
        <li style="background-color: lightgreen; color:black;font-weight:bold"><a href="#" id="RenderResults_Btn">Key Achievements</a>
        </li>
    </ul>
</div>

Answer 1

您将引用元素的变量与按 ID 选择的 jQuery 选择器混淆了。本质上，您可以删除以下行:

var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');

然后将 jQuery 选择器更改为:

$('#RenderPortfolio_Btn').on('click touchstart', function() {

和

$('#RenderResults_Btn').on('click touchstart', function() {