jQuery: сбросить все остальные свойства div, за исключением текущего div

Question

jQuery: сбросить все остальные свойства div, за исключением текущего div

0

Я пытаюсь сделать так, что, когда я нажимаю div, все остальные divs становятся "отмененными" (т.е. Только выбранное background-image div отличается, другие сбрасываются на оригинал), и поэтому только щелчок выбран/активен. Каждый div имеет отдельное изображение вкл/выкл.

http://jsfiddle.net/sergep/5QsCy/

Код имеет много повторений. Я не совсем уверен, как подойти к идее "отменить выбор" всех других div (кроме активного) без необходимости использовать намного более избыточный код.

Нужно ли вообще убирать (то есть обобщать и удалять избыточность) мой jsFiddle:

$(".gameboy").click(function () {
   var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/funky/136/Game-1-128.png\")";
   var img2 = "url(\"https://cdn3.iconfinder.com/data/icons/funky/136/Game-2-128.png\")";
    if ($(this).css("background-image") == img1) {
        $(this).css("background-image", img2);
    }
    else {
        $(this).css("background-image", img1);
    }
});
$(".switch").click(function () {
   var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/mobiactions/512/turn_off_on_power-128.png\")";
   var img2 = "url(\"http://icdn.pro/images/en/o/n/on-off-icone-4799-128.png\")";
    if ($(this).css("background-image") == img1) {
        $(this).css("background-image", img2);
    }
    else {
        $(this).css("background-image", img1);
    }
});
$(".face").click(function () {
   var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/glyph/227/Smile-128.png\")";
   var img2 = "url(\"https://cdn3.iconfinder.com/data/icons/glyph/227/Pacman-1-128.png\")";
    if ($(this).css("background-image") == img1) {
        $(this).css("background-image", img2);
    }
    else {
        $(this).css("background-image", img1);
    }
});

Serge P 21 окт. 2013, в 14:46

Источник

1

Используйте классы в своем CSS и добавляйте / удаляйте эти классы, используя JS, вместо программного изменения каждого фонового изображения. Это сделает ваш код намного более читабельным.
ahren 21 окт. 2013, в 12:26

Теги:

jquery

html

css

toggle

1 ответ

Ещё вопросы

Используйте классы в своем CSS и добавляйте / удаляйте эти классы, используя JS, вместо программного изменения каждого фонового изображения. Это сделает ваш код намного более читабельным.

DMTintner · Accepted Answer · 2013-10-21T11-15-00.000Z

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

$('div').click(function(){
    $(this).siblings('div').removeClass('active');
    $(this).addClass('active');
});

то просто создайте свой css для.active класса каждого div:

.gameboy.active {...}
.switch.active {...}
.face.active {...}

Кстати, селектор "div" в функции щелчка только для примера. Скорее всего, вы не захотите, чтобы каждый div на вашем сайте был доступен для кликабеля, поэтому я бы либо дал класс всем 3 из этих divs, либо задал их с помощью более конкретного селектора css