无法使用JQuery

时间:2018-09-20 22:08:44

标签: jquery html

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

3 个答案:

答案 0 :(得分:2)

将函数放入内部

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

您只是将$符号放错了位置:  (函数($){   代替   $(function(){