Question

基本上，当点击<div>时，我会添加一个“id”类。该ID已更新为“有效”

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

如果您点击小图片，则构建器库项目<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，其中活动类仍未应用于包含图片的div。

基于那个JsFiddle，你在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

添加类的JQuery OnClick问题

1 个答案: