JQuery OnClick問題與添加類

Question

基本上，單擊<div>時，我將添加“ id”類。 該ID已更新為“有效”

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

如果單擊小圖像，builder-gallery-item <div>需要在末尾添加id="active" 。

這是我在小提琴中嘗試過的方法，並且在外部文件中具有完全相同的代碼，但是它行不通。

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元素應該是唯一的

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

看到這個JsFiddle

編輯為了清理注釋，OP具有更新的JsFiddle ，其中活動類仍未應用於包含圖片的div。

基於該JsFiddle，您將對帶有builder-gallery-item類的所有元素（而不只是單擊的元素addClass('active')調用addClass('active') 。 您應該使用：

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

$(this)實際上是在引用圖形對象，這就是為什么我改用$(this).closest('div') 。 參見更新的小提琴