javascript - 无法读取未定义的属性 'click'。使用each()进行滑动切换

Question

我正在尝试制作简单的 SlideToggle 选项卡，但不幸的是我在控制台中收到错误:

Cannot read property 'click' of undefined

我自己发现的是，如果我没记错的话，jQuery 不会将 click() 视为一个函数。

我的 HTML 代码:

<div class="container">           
         <div id="mineUI" class="pull-right">
                <div class="row">
                        <div id="mineUIbtn" class="col-md-4 text-center">
                                Home
                                <div id="UIcontent">blabla</div>
                        </div>
                        <div id="mineUIbtn" class="col-md-4 text-center">
                                Ok
                                <div id="UIcontent">blabla</div>
                        </div>
                        <div id="mineUIbtn" class="col-md-4 text-center">
                                Rem
                                <div id="UIcontent">blabla</div>
                        </div>
                </div>

        </div>
</div> 

我的 jQuery 代码:

 var mineUI = function() {
var UIcontent = $("div#mineUI > div.row > div#mineUIbtn > #UIcontent");
var mineUIbtn = $("div#mineUI > div.row > div#mineUIbtn");



UIcontent.each(function(){
    $(this).slideUp("fast");
});

  mineUIbtn.each(function(i){
      var current_item = $(this)[i];
      current_item.click(function(){
          UIcontent.slideToggle("fast");
      });
  });
};
$(document).ready(mineUI);

感谢您的帮助!

Answer 1

在 .each() 中，“this”是单个元素，而不是集合。所以“this”等于“mineUIbtn[i]”。错误消息表明它无法读取 undefined object 的属性($(this)[i] 未定义)。

使用更多代码进行编辑:你真的不应该给多个东西相同的 id。创建一个“mineUIbtn”类和一个“UIcontent”类。除非您这样做，否则以下代码将不起作用。

var mineUI = function() {
    $(".UIcontent").slideUp("fast"); 

    $(".mineUIbtn").click(function(){
       $(this).child().slideToggle("fast");
    });
});
$(document).ready(mineUI);

点击处理程序中的“this”指的是被点击的特定元素，而不仅仅是所有的mineUIbtn。 .child() 返回其所有直接子级。由于只有一个子元素并且它是 UIcontent，因此您可以继续对其调用 .slideToggle()。