jquery - 如何在 jQuery 中引用元素

Question

我目前正在自学 jQuery(昨天开始)，但我已经陷入困境了..我用它来创建可以相互关联的小下拉菜单。

$(document).ready(function(){
  var selTxt = 0;
  $(".button").click(function(){
        alert($(this).prev(".button").attr("id"));
        $(".text").slideUp(150);
        $(this).next(".text").slideToggle(150,function(){
            selTxt = $(this).prev(".button").attr("id");
        });

  });
});

了解 jQuery 的人会意识到，它只是在单击按钮时展开一个文本框，并隐藏所有其他展开的文本框。

问题:

看一下 alert() 函数是在哪里调用的。在那一行我希望运行一个 if 语句..像这样:

$(".button").click(function(){
    if($(this).attr("id") == selTxt){
        $(".text").slideUp(150);
        $(this).next(".text").slideToggle(150,function(){
            selTxt = $(this).prev(".button").attr("id");
        });
    }
});

因此，我只希望它在 selTxt 不等于已单击元素的 id 时运行。因此，if 语句中的 $(this) (我希望)将引用被单击的 .button，但猜猜看:事实并非如此!有人可以告诉我为什么不吗？我想因为我用 $(this) 引用了 .button ，所以我也可以在那里使用它，但显然不能。

好老的 JSFiddle here .

提前致谢。

Answer 1

正如 @Hawiak 指出的，问题是您正在测试所有 div.button 的 .attr("id") 但您的 HTML 有一个 id 属性仅分配给第一个 div。但无论如何，我不认为通过 id 检查是最好的方法。这是我的建议:

$(function() {
  $(".button").click(function() {
      var text = $(this).next(".text");

      if (!text.hasClass("open")) {
        $(".text").slideUp(150).removeClass("open");
        text.stop(true, true).slideToggle(150).addClass("open");
      }
  });

  $(".hideAll").click(function() {
    $(".text").slideUp(150).removeClass("open");
  });
});​

以及更新的 Fiddle here .