javascript - 添加类时的 JQuery OnClick 问题

Question

基本上，当 <div> 时，我添加了一类“id”被点击。 ID 更新为“事件”

http://mpagallery.co.uk/exibitions/future/

如果单击小图像，则会显示 builder-gallery-item <div>需要添加id="active"到最后。

这是我在 fiddle 中尝试过的内容，并且在外部文件中具有完全相同的代码，但它不起作用。

jQuery(function ($) {
  $(document).ready(function ($) {
    $('.builder-gallery-item').on('click', changeClass);
  });
});

function changeClass() {
  $('.builder-gallery-item').removeAttr('id', 'active');
  $(this).attr('id', 'active');
}

Answer 1

我认为您正在寻找 addClass和 removeClass方法

读完您的评论后，我强烈鼓励您使用类而不是 ID，因为 HTML Id elements should be unique

   $(document).ready(function () {
       $(".builder-gallery-item").on("click", function () {
          $('.builder-gallery-item').removeClass('active');
          $(this).addClass('active');
        });
    });

查看此JsFiddle

编辑为了清理评论，OP更新了JsFiddle ，其中 active 类仍未应用于包含图片的 div。

基于该 JsFiddle，您将在具有 builder-gallery-item 类的所有元素上调用 addClass('active')，而不仅仅是使用 builder-gallery-item 类的元素被点击。您应该使用:

jQuery(function ($) {
    $(".builder-gallery-image").on("click", function () {
        $('.builder-gallery-item').removeClass('active');
        $(this).closest('div').addClass('active');
    });
});

$(this) 实际上引用了图形对象，这就是我使用 $(this).closest('div') 代替的原因。请参阅Updated Fiddle