Question

如果我的jQuery有点问题。

我必须隐藏并显示此

<td class="tdtext">
    <button class="prijzenknop">
        Prijzen 
        <div class="prijzen" style="display:none;">
            Jip's SpartelClub (één kind + één begeleider)                                               <br />
            Prijs: <b>&euro; 8,50</b>
            <br />
        </div>
    </button>
</td>

我正在使用这个jQuery

                $(document).ready(function(){
                    $(".prijzenknop").each(function(){
                        $(".prijzenknop").click(function(){
                            $(this).find(".prijzen").toggle();                              
                        });
                    });
                });

问题在于.toggle功能不起作用。如果我使用.show代替.toggle它有效。但后来我无法切换它。

按钮内的所有信息都没有问题。

Answer 1

只需使用：

$(document).ready(function () {
    $(".prijzenknop").click(function () {
        $(this).find(".prijzen").toggle();
    });
});

否则，您多次绑定它，因此调用并调用toggle（）。因此，如果匹配元素的数量是偶数，则toggle（）将不会产生任何影响。

Answer 2

因为你使用.each你添加点击事件多次。使用：

        $(document).ready(function(){
            $(".prijzenknop").each(function(){
                $(this).click(function(){
                    $(this).find(".prijzen").toggle();                              
                });
            });
        });

或使用：

        $(document).ready(function(){
              $(".prijzenknop").click(function(){
                  $(this).find(".prijzen").toggle();                              
              });
        });

因此，当您向$(".prijzenknop")添加点击事件时，您已将事件添加到该类的所有元素

Answer 3

就个人而言，尝试：

$(document).ready(function() {
    $('.prijzenknop').click(function() {
        $('.prijzen').toggle();
    }
}

jQuery切换功能无法正常工作

3 个答案: