Question

我有许多信息面板共享同一个类，我希望使用slideToggle功能显示/隐藏它。面板的内容通过json动态拉入。所以Ibelevide我必须使用'live'而不是'bind'函数？以下代码将同时切换所有面板。我希望一次只能切换一个面板。

$('a.sc-info-toggle').live('click', function() {
    $('.sc-info').slideToggle();
    return false;
});

非常感谢

Answer 1

您不必使用.each()，因为默认情况下jQuery会将您的函数应用于匹配的元素，并且您必须将return false;置于发生点击事件的位置。所以这可能是你想要做的事情：

$('a.sc-info-toggle').live('click', function(event) {
  $('.sc-info').slideToggle();
  return false;
});

Answer 2

您使用.each()回调返回false，而不是.live()回调中的

$('a.sc-info-toggle').each(function(){ 
    $(this).live('click', function(event) {
        $('.sc-info').slideToggle();
        return false;
    });         
});

根据文档，从.each()回调中返回false：

我们可以在特定的迭代中打破$ .each（）循环回调函数返回false。返回非假是与a相同在for循环中继续声明;它将立即跳到下一个迭代。

从.live回调中返回false基本上取消了基础事件的默认操作。

顺便说一下，.live()现已弃用，你应该在旧版本中使用.on()（在jQuery 1.7+中）和.delegate()。

Answer 3

live已弃用。您想使用on代替

 $(document).on('click', 'a.sc-info-toggle', function() {
    $('.sc-info').slideToggle();
    return false;
 });

您尚未说明所点击的锚点与要滑动的面板之间的关系。如果面板位于锚点旁边，则应该起作用：

 $(document).on('click', 'a.sc-info-toggle', function() {
    $(this).next('.sc-info').slideToggle();
    return false;
 });

理想情况下，尝试识别一些容器 - 比如id为foo的div - 它将始终包含所有这些锚点，并在上选择而不是{{1} }。

document

这可能会更有效率，因为您不会收听文档上发生的每一次点击，而只会收听$("#foo").on('click', 'a.sc-info-toggle', function() { $('.sc-info').slideToggle(); return false; });内发生的点击。

Answer 4

新年快乐，伙计，你为什么要使用每个循环它真的不需要，让它变成如下：

$('a.sc-info-toggle').live('click', function(event) {

// $(this) will return the link which is clicked

    $(this).find('.sc-info').slideToggle();
       return false;

  });

Answer 5

命令return false;只会退出.each循环。此外，在.live内滑动切换该页面上的所有.sc-info，而不仅仅是与您点击的按钮相关的那个。

  $('a.sc-info-toggle').live('click', function(event) {
    $(**the.div.you.need**).slideToggle()
  });

Answer 6

live将事件处理程序绑定到与选择器匹配的元素，无论它们现在还是将来都存在。所以在这里使用每个都有点傻。这也是一样的：

$('a.sc-info-toggle').live('click', function(event) {
    $('.sc-info').slideToggle()
    return false;
});

Answer 7

你不需要each()，jQuery会处理它，因为选择器会返回一个数组，return false也应该在live()回调中：

$('a.sc-info-toggle').live('click', function() {
    $('.sc-info').slideToggle();
    return false;
});

但是，如果您使用的是最新版本的jQuery（1.7+），请使用.on()方法。否则，我建议尽可能使用.delegate()，因为它更有效。见https://stackoverflow.com/a/4579154/978306

Answer 8

而不是：

$('.sc-info').slideToggle();

您需要定位相对于切换的.sc-info。

例如，如果你的html看起来像这样：

<a href="#" class="sc-info-toggle">Toggle</a>
<div class="sc-info">
    <p>Content</p>
</div>

你可以用这个：

$('a.sc-info-toggle').live('click', function() {
    $(this).next('.sc-info').slideToggle();
    return false;
 });

如果切换位于内容之内，则使用.parent（）而不是.next（）。

希望有所帮助：）

Answer 9

好的，这取决于您的HTML的外观，但目前您使用的是.sc-info类的所有元素，而不仅仅是您的切换链接附近的元素。

它应该看起来像这样（再次，取决于你的标记）：

$('a.sc-info-toggle').live('click', function(event) {
  $(this).parent().find('.sc-info').slideToggle();
});

这会在这样的结构中找到面板：

<div>
    <a class="sc-info-toggle">Toggle 1</a>
    <div class="sc-info">Panel 1</div>
</div>

<div>
    <a class="sc-info-toggle">Toggle 2</a>
    <div class="sc-info">Panel 2</div>
</div>

Answer 10

这应该有用（我猜测句柄是幻灯片元素的子句）：

$('a.sc-info-toggle').live('click', function() {
  $(this).parents('.sc-info').slideToggle();
  return false;
});

jquery每个函数语法更新

10 个答案: