1

我有四个按标题切换的 div（如下所示，我展示了一组）。每个标题链接类与文本字段类之前的类匹配。我希望使用 $this 编写一些干燥器来针对当前类，然后将当前类作为类文本，而不是四次单独编写 javascipt。

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

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

尝试失败

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

    });
  });

工作标记

HTML 开始

    <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 结束

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

    });
  });
4

3 回答 3

0

您需要在选择器中获取类，

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

    });
于 2012-11-15T04:03:02.243 回答
0

这是一个例子>>> 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 必须是您要切换的那个。

然后你的通用点击功能将是这样的（注意 e.preventDefault() ，在你的链接中使用它而不是 javascript:void() ..

$('.collapsable').click(function(e) {
    e.preventDefault();
    $(this).next().slideToggle( function() { //ani complete.
    });
});
于 2012-11-15T04:05:20.137 回答
0

这个怎么样？

$("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，link#sec1 仍会将页面滚动到页面上的该 id 标记。

于 2012-11-15T04:50:39.817 回答