Question

我有四个按其标题切换的div（如下图所示，我展示了一组）。每个标题链接类都匹配文本字段类之前的类。而不是写javascipt四个单独的时间，我希望写一些干燥器使用$ this来定位当前类，然后当前类的类文本。

important_info_header 类将是每个div的动态类。

这种写作不太好，所以欢迎任何帮助

ATTEMPT失败

 $(this).click(function() {
    $(this+'.text').slideToggle('slow', function() {
     //ani complete.

    });
  });

工作加价

HTML START

    <h4><a href="javascript:void(0)"  class="important_info_header"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="important_info_header text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->


 <h4><a href="javascript:void(0)"  class="important_info_header"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="important_info_header text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->



 <h4><a href="javascript:void(0)"  class="rules"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="rules text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->


 <h4><a href="javascript:void(0)"  class="shipping"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="shipping text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->

HTML END

    $('.important_info_header').click(function() {
    $('.important_info_header.text').slideToggle('slow', function() {
     //ani complete.

    });
  });

Answer 1

你需要在选择器中获取类

  $(($this).attr('class')+'.text').slideToggle('slow', function() {
     //ani complete.

    });

Answer 2

以下是＆gt;＆gt;＆gt;的示例FIDDLE

将一个类添加到..'collapsable'到四个主要链接的效果

<a href='' class="important_info_header collapsable"> //link 1
<a href='' class="rules collapsable"> //link 2
<a href='' class="shipping collapsable"> //link 3
 ....and so on

直接跟随的div必须是您要切换的div。

然后你的通用点击功能就像这样（注意e.preventDefault（），在你的链接中使用它代替javascript：void（）..

$('.collapsable').click(function(e) {
    e.preventDefault();
    $(this).next().slideToggle( function() { //ani complete.
    });
});

Answer 3

这个怎么样？

$("h4 a").click(function() {
   $("div." + $(this).attr("class") ).slideToggle('slow', function() {
      // function..
   });
});

如果您可以重构HTML，我发现这也很有效

HTML

<a href="#sec1" class="expandable">Go to Sec1</a>
<a href="#sec2" class="expandable">Go to Sec2</a>
<a href="#sec3" class="expandable">Go to Sec3</a>

<div id="sec1">Sec 1 content</div>
<div id="sec2">Sec 2 content</div>
<div id="sec3">Sec 3 content</div>

的jQuery

$(".expandable").click(function(){
    $( $(this).attr("href") ).slideToggle("slow");
    // add callback/etc as needed
});

它很有效，因为href包含了CSS id选择器所需的#。这样，如果您的用户没有启用JS，链接＃sec1仍会将页面滚动到页面上的该id标记。

Jquery javascript使用$ this折叠

3 个答案: