jquery взаимоисключающий клик

Question

У меня есть 3 деления с 2 возможными тегами изображений для каждого (активного или неактивного). Если один div выбран, чтобы активировать другие div, он должен быть неактивным. Как это сделать с помощью тегов img и что произойдет, если у пользователя отключен JavaScript?

Answer 1

Вы имеете в виду что-то подобное?

<div class="block" id="block1">
    <img src='inactive_block1.jpg'>
</div>

<div class="block" id="block2">
    <img src='inactive_block2.jpg'>
</div>

<div class="block" id="block3">
    <img src='inactive_block3.jpg'>
</div>

При использовании библиотеки, подобной jQuery , javascript будет выглядеть следующим образом:

$(function() {
    $('.block').click(function() {
       $('#block1').find('img').attr('src', 'inactive_block1.jpg');
       $('#block2').find('img').attr('src', 'inactive_block2.jpg');
       $('#block3').find('img').attr('src', 'inactive_block3.jpg');
       $(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg');
    });
});

С учетом вышеизложенного, если у вас есть inactive_block1.jpg, inactive_block2.jpg, inactive_block3.jpg и active_block1.jpg, active_block2.jpg и active_block3.jpg, вы должны получить то, что хотите.

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

Answer 2

если у пользователя отключен JavaScript, вы ничего не можете сделать на основе JavaScript, чтобы справиться с динамическим изменением страницы. Единственный другой вариант, который у вас есть, - это создание «устаревшей» версии вашей функциональности, которая требует запроса страницы после каждого клика.

Я бы порекомендовал изучить, как динамически добавлять / удалять классы из элементов в DOM, именно так я бы подходил к этой проблеме. Вы можете легко сделать выбор jQuery для всех элементов, которые «активны» при щелчке, и установить для них «отключенный» класс, таким образом, вы практически полностью отключаете все, кроме элемента, на который щелкнули.

Имеет ли это смысл?