无法使用jQuery按类名获取元素集合

lymgl2op 于 2022-12-29 发布在 jQuery

关注(0)|答案(3)|浏览(107)

我尝试使用类.genre_prod_title获取所有元素，并在foreach循环中为所有元素打印"OK"，在单击时打印"CLICK"。
编辑：我将jQuery绑定为$，因为我正在使用WordPress进行开发。

(function($) {

  var genre_prod_title_all = $(".genre_prod_title");

  console.log(genre_prod_title_all);

  $(".genre_prod_title").each(function(index) {

    console.log("OK");

    $(this).on("click", function(event) {

      console.log("CLICK");

    });
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><button class="genre_prod_title" id="film">Film</button></li>
  <li><button class="genre_prod_title" id="magazine">Magazine</button></li>
  <li><button class="genre_prod_title" id="documentaire">Documentaire</button></li>
</ul>

但是变量genre_prod_title_all的打印（这只是一个测试，用于检查是否选择了所有三个元素）只显示一个元素，并且不打印"OK"和"CLICK"。

jquery

来源：https://stackoverflow.com/questions/52434015/cant-get-a-collection-of-elements-by-class-name-using-jquery

3条答案

按热度按时间

kknvjkwl1#

将函数放入

$(document).ready(function() {
...
}

赞(0）回复(0）举报 2022-12-29

x3naxklr2#

$(document).ready(function(){
    $('.genre_prod_title').each(function(element){
    console.log('ok');
    $(this).on('click',function(event){
        console.log('click')
    });
  })
})

您可以使用纯Javascript执行此操作，如下所示

document.addEventListener('DOMContentLoaded', function(){
    var elements = document.querySelectorAll('.genre_prod_title');
    elements.forEach(function(el, index){
        console.log('ok')
        el.addEventListener('click', function(event){
            console.log('click');
        });
    });
});

赞(0）回复(0）举报 2022-12-29

lyr7nygr3#

你只是把$符号放错了位置（函数（$）{而不是$（函数（）{

赞(0）回复(0）举报 2022-12-29