1

我正在尝试（很糟糕）做的是在单击一个元素时隐藏它，并将一些文本附加到它上面的 body 元素。我能够成功地定位父 div，添加一个 clicked 类，然后定位该 div 的兄弟姐妹以将新 div 及其后续文本附加到它。问题是，由于其中几个父 div 存在于屏幕上，当我单击页面上其他 div 中的元素时，它会将另一个附加的“内容”div 添加到它之前的 div 中。我很有可能以最低效的方式来做这件事；我的Javascript技能缺乏......

    var link = $('.is-useful-link a');
    var unclicked = $('.field-name-field-review-useful');


    link.click(function(){
        $(this).parents('.field-name-field-review-useful').addClass('clicked');
        if (unclicked.hasClass('clicked')) {

            var $clicked = $('.field-name-field-review-useful.clicked');
            var content = '<div class="thanks animated fadeIn">Thanks for your feedback!</div>';

            $clicked.hide();
            $clicked.siblings('.field-name-body')
                .append(content);

        } else {
            return false;
        }
    });

在此处输入图像描述

4

1 回答 1

1

那是因为你第一次点击 alink时，它会给出field-name-field-review-useful一个类clicked。然后你检查是否field-name-field-review-useful有这个clicked类，如果有，附加content.

第二次单击 alink时，会发生同样的事情，只是现在field-name-field-review-useful类中有两个元素，所以它再次将内容附加到它上面。

我建议您使用 附加点击处理程序one()，这样，点击处理程序只会对每个元素触发一次（请注意，以下内容未经测试）：

link.one('click', function() {
  $(this).parents('.field-name-field-review-useful')
         .addClass('clicked') // do you need this anymore?
         .hide()
         .siblings('.field-name-body').append(content);       
});

注意：我假设.field-name-field-review-useful只有一个兄弟姐妹与 class .field-name-body，如果不是这种情况，那么您将看到与以前相同的行为（内容被附加到 multiple .field-name-body's）。如果是这种情况，您将不得不重新构建您的标记，或者使用其他一些遍历方法来获取，以便您可以获取相关的.field-name-body.

于 2013-07-17T12:46:29.657 回答