Блог

Я использовал этот точный код для другого элемента div, и он работает отлично. Когда я решил добавить тот же код в другой элемент div с другим идентификатором, он регистрирует, что элемент был нажат, но он не добавляет и не удаляет ни один из классов.

 $('#quoteClick').click(function(){
    $('#cbox-1').addClass('displayCboxBackground');
    $('#cbox-2').removeClass('displayCboxBackground');
    $('#cbox-3').removeClass('displayCboxBackground');

    $('#dbox-1').addClass('displayBlock');
    $('#dbox-2').removeClass('displayBlock');
    $('#dbox-3').removeClass('displayBlock');
    console.log("clicked");
});
  

Структура html выглядит следующим образом:

 <div id="cbox-1">
    <div id="dbox-1">
         content...
    </div>
</div>    
<div id="cbox-2">
    <div id="dbox-2">
         content...
    </div>
</div>
<div id="cbox-3">
    <div id="dbox-3">
         <div id="quoteClick">
             a quote
         </div>
    </div>
</div>  
  

JSFiddle: https://jsfiddle.net/m81c23cx/1 /

В скрипке вы можете видеть, что содержимое будет меняться при нажатии на каждый заголовок. При нажатии на элемент «quoteClick» я хочу, чтобы он менялся на содержимое второго заголовка точно так же, как это происходит при нажатии на второй заголовок.

Я вижу в консоли Chrome, что когда я нажимаю на элемент div, он выделяет все классы, но не изменяет ни один из них. У меня есть jQuery внутри document.ready() функции, поэтому он должен ожидать загрузки DOM, и он отлично работает, когда я просто записываю строки в консоль.

Я удивлен, что никто на самом деле не подвергал сомнению ваше использование идентификаторов (вместо того, чтобы предлагать вам перепроверить дубликаты). Причина, по которой этот код трудно отлаживать, заключается в том, что он слишком сложный. В результате вам будет сложно исправить проблемы, подобные этой, и в будущем.

Отбросьте это, сделайте это лучше. Я даже не просматривал вашу скрипку. Вместо этого я собираюсь предложить вам полностью изменить свой подход.

Обновите свой HTML и используйте классы вместо идентификаторов. Что-то похожее на это:

 <div class="cbox">
    <div class="dbox">
         content...
    </div>
</div>    
<div class="cbox">
    <div class="dbox">
         content...
    </div>
</div>
<div class="cbox">
    <div class="dbox">
         <div id="quoteAdvert">
             a quote
         </div>
    </div>
</div> 
  

Обновите свой JavaScript и используйте this для получения контекста текущего поля:

 $('.cbox').click( function cboxClicked () {
  // Remove the previous class from all .cbox amp; .dbox elements; we don't care which
  $('.cbox').removeClass('displayCboxBackground') 
  $('.dbox').removeClass('displayBlock')

  // Add a new class to the clicked .cbox amp; it's child .dbox
  $(this).addClass('displayCboxBackground')
  $(this).children('.dbox').addClass('displayBlock')
})
  

В чем прелесть этого? У вас может быть 1000 ящиков, он все равно будет работать. Нет необходимости добавлять какие-либо дополнительные строки кода.

Вот скрипка, показывающая это в действии.

Приведенный вами пример кода не соответствует созданному вами jsfiddle.

В вашей скрипке вы используете селектор jquery $('#quoteClick') , но нет элемента с этим идентификатором. Однако есть элемент #quoteAdvert . Измените это, и вы увидите щелчок в консоли.

Свойство classList возвращает список маркеров атрибута class рассматриваемого элемента. К счастью для нас, он также поставляется с несколькими удобными методами:

• добавить — добавляет класс
• удалить — удаляет класс
• переключить — переключает класс

• содержит — проверяет, существует ли класс

  // добавляет класс «foo» в el el.classList.add(«foo»);

  // удаляет класс «bar» из el el.classList.remove(«bar»);

  // переключает класс «foo» el.classList.toggle(«foo»);

  // выводит «true» на консоль, если el содержит «foo», «false», если не console.log( el.classList.contains(«foo»));

  // добавить несколько классов в el el.classList.add( «foo», «bar»);