Question

我正在HTML和jQuery中创建一个选择按钮但jQuery中的按钮选择不起作用。我的HTML文件是：

<div class="back_gray_light sideBar_content" id="sideBar_mostRate_selectYear">
        <div id="sideBar_selectYear">
            <div id="sideBar_selectYear_button">
                <button type="button">
                    <img src="/static/icons/100film/arrow_button.png">
                </button>
            </div>
            <div id="sideBar_selectedYear">
                <p>
                    1394
                </p>
            </div>
            <div id="sideBar_allYears_hide">
                <button type="button" class="sideBar_year_hide sideBar_year_item">
                    <p>
                        1394
                    </p>
                </button>
                <button type="button" class="sideBar_year_hide sideBar_year_item">
                    <p>
                        1393
                    </p>
                </button>

            </div>
        </div>
    </div>

我的jQuery文件是：

$(document).ready(function(){

    console.log('start');

    $('#sideBar_selectYear_button button').click(function(event){
        console.log('select year');
        $('#sideBar_allYears_hide').slideDown();
    });

});

控制台中的输出是：

start

我的程序无法打印select year。

Answer 1

请查看以下演示。我更新了你的代码。我刚用Alert取代了console.log，所以你可以在浏览器上看到结果。你的代码完全正常工作只是＃和。。如果你使用类，那么你必须在类名之前使用点（。），如果你使用id，那么你必须在id名称之前使用（＃）。

我只是隐藏sideBar_allYears_hide div以显示滑动功能。

$(document).ready(function(){
    alert('start');
    $('#sideBar_selectYear_button button').click(function(event){
        alert('select year');
        $('#sideBar_allYears_hide').slideDown();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="back_gray_light sideBar_content" id="sideBar_mostRate_selectYear">
        <div id="sideBar_selectYear">
            <div id="sideBar_selectYear_button">
                <button type="button">
                    <img src="/static/icons/100film/arrow_button.png">
                </button>
            </div>
            <div id="sideBar_selectedYear">
                <p>
                    1394
                </p>
            </div>
            <div id="sideBar_allYears_hide" style="Display:none;">
                <button type="button" class="sideBar_year_hide sideBar_year_item">
                    <p>
                        1394
                    </p>
                </button>
                <button type="button" class="sideBar_year_hide sideBar_year_item">
                    <p>
                        1393
                    </p>
                </button>

            </div>
        </div>
    </div>

Answer 2

我很确定你只需要改变这一行。

$('.sideBar_allYears_hide').slideDown();

到这个

$('#sideBar_allYears_hide').slideDown();

简单ID #类.交换错误

编辑：

要解决主要问题，您需要在点击之前执行此jquery选择器：

$('#sideBar_selectYear_button [type=button]')

编辑：但现在我回头看它，原来似乎没有任何问题。由于元素是按钮元素。所以我并不认为这是一个问题。

$('#sideBar_selectYear_button button')

Answer 3

就像已经说过你需要改变“。”使用“＃”，悬停你只是将函数绑定到click事件，你可能还希望通过代码触发它或者实际点击“#sideBar_selectYear_button按钮”将“select year”记录到控制台

jquery嵌套选择不起作用

3 个答案: