Прокрутка объектов с тем же классом с помощью jQuery?

Question

У меня есть несколько кнопок, каждый из которых имеет класс «полноэкранный режим», который я намерен использовать для отображения/скрытия содержимого на странице. Все кнопки имеют идентификаторы, которые являются названиями школьных программ, и для каждой кнопки на странице есть divs с классами, которые соответствуют идентификатору (кнопка с идентификатором «программирование» и соответствующий div с классом «программирование», и т.д).

Моя цель теперь состоит в том, чтобы иметь это, когда нажата кнопка, div с классом, который соответствует идентификатору щелкнутой кнопки, скрыт, предоставив этому div класс, который предназначен для отображения: none.

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

$('.fullscreen-button').each(function(i,elm) { 
    programTitle = $(elm).attr("id"); 
     $(elm).click(function(){ 
      $('.program-collector div').each(function(j,pelm) { 
       if ($(pelm).hasClass(programTitle)) { 
        $(pelm).addClass("hidden"); 
       } 
      }); 
     }) 
    }); 

Итак, как же я на самом деле цикл через все кнопки и дивы должным образом?

Answer 1

Это должно быть простое решение проблемы с .

Если элемент с классом fullscreen-button нажат, то какие-либо элементы, соответствующие .program-collector div.{button-id} будут скрыты (где button-id является id атрибута щелкнуло .fullscreen-button элемента).

Обратите внимание, что $(selector).hide() автоматически применяет display: none

$('.fullscreen-button').click(function(){ 
    $('.program-collector div.' + $(this).attr('id')).hide(); 
}); 

Я говорю просто потому, что он будет работать для большинства здравомыслящих веб-страниц. Теоретически вы можете иметь имя id/class, которое могло бы вызвать проблемы для использования в селекторе jQuery и было бы необходимо экранировать.

http://api.jquery.com/hide/