javascript - jquery 只适用于一个部分？

Question

我一直在摆弄一些jquery，并尝试让按钮在单击时显示内容，并在再次单击时隐藏它。

我遇到的问题是只有第一个按钮可以按我想要的方式工作。其他的根本不起作用。

你可以看一下我的JSFiddle:http://jsfiddle.net/jd367bbv/

$(document).ready(function () {
    $(".comments").hide();

    var toggled = false;

    $("#comment-display").click(function () {
        if (toggled) {
            $(this).next().slideToggle(100);
            toggled = false;
            $(this).text("Show Comments");
        } else {
            $(this).next().slideToggle(100);
            toggled = true;
            $(this).text("Hide Comments");
        }
    });
});

我错过了什么吗？

当我使用 H1 header 时，此方法有效:http://jsfiddle.net/98sLxLc8/

我似乎无法理解为什么它不能与我的其他 jquery 代码一起使用。

我对 javascript 很陌生，更不用说 jquery 了，我只是在尝试新事物。

谢谢!

Answer 1

Fiddle

HTML

<button class="comment-display">Show Comments</button>
<div class="comments"><!-- unchanged --></div>
<button class="comment-display">Show Comments</button>
<div class="comments"><!-- unchanged --></div>

JavaScript

$(document).ready(function () {
    $(".comments").hide();

    $(".comment-display").click(function () {
        var $this = $(this);
        $this.next().slideToggle(100);

        if ($this.data('toggled')) {
            $this.data('toggled',false);
            $this.text("Show Comments");
        } else {
            $this.data('toggled',true);
            $this.text("Hide Comments");
        }
    });
});

<小时/>

说明

• 我没有使用 id，而是在 HTML 中创建了 comment-display 类，并更新了 jQuery 选择器来反射(reflect)这一点；正如其他人所说，您每页只能有一个 ID(就像您不希望其他人拥有与您相同的社会安全号码一样)。该方法适用于您的 Heading 示例，因为您是按元素名称进行选择；每页可以有多个元素，但无论元素如何，ID 都只有一个值
• 在多次使用时缓存 jQuery 对象，在本例中我已缓存 $(this);从现在开始，我将使用 $this 来引用该对象
无论条件通过还是失败，都会执行
• $this.next().slideToggle(100)，您可以减少重复并将其从 block 中拉出。注意:唯一不会执行的方法是在访问 block 之前(例如在条件中)出现 JS 错误，但几乎可以肯定地假设这不会发生
• 重要提示:两个元素都使用变量 toggled；请注意单击一个按钮然后单击另一个按钮时会发生什么(措辞与状态不同步)。为了避免这种情况，您应该使用类或 data-* 属性将切换状态本地化到元素。我在上面使用了 data-* ，因为它更容易演示它应该如何工作并且使用起来更干净

<小时/>

Pro-Move

$(document).ready(function() {
    $(".comments").hide();

    $(".comment-display").click(function() {
        var $this   = $(this),
            toggled = !!$this.data('toggled');

        $this.next().slideToggle(100).end()
             .data( 'toggled', !toggled )
             .text( (toggled?'Show':'Hide')+' Comments' );
     });
});

这是上述内容的更精简版本。请注意，使用了几个支持 Action :

• 感叹号前缀运算符 (!!) 使用两次来获取 bool 值。这是因为默认情况下数据切换值是未定义。 undefined 是假的，因此使用一个感叹号将使其变为 true，但我们想要原始值，因此我们使用两个感叹号，使其变为 false。这里可能不需要，但这是很好的曝光，以防您将来再次看到它
• end()在 jQuery 中使用是因为 next() 被调用。 next() 返回当前选择器后面的一系列元素，但在本例中我们要执行滑动操作，然后对原始对象执行操作 ($this )，而不是调用 next 返回的值。为此，使用end()。适本地命名，它结束该链并上升到前一个选择器，这使我们能够更新 data() 和 text() 作为同一选择器的一部分语句，减少更多代码 - 注意:您不想在此处链接太多命令。这是因为它可能会变得更难遵循，但这三者具有逻辑意义(执行操作、更新 View 和模型)
• if 语句没有做太多事情，因此我们可以在 text() 方法中使用三元运算符 (?:)，再次减少使用的语法量并[希望]提高可读性和理解性

我相信其他人可以捕获这一点并使其变得更好，或者进一步减少它；但这应该足以获得关于如何使用 jQuery 这样的库的新视角。