Question

我正在尝试获取类为.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”。

Answer 1

将函数放入内部

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

Answer 2

$(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');
        });
    });
});

Answer 3

您只是将$符号放错了位置：（函数（$）{ 代替 $（function（）{

无法使用JQuery

3 个答案: