Переключить другие специальные классы при переключении на

Question

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

При нажатии на одно я хочу, чтобы оно было выделено, заменив его фоновое изображение. Если выделен другой div, я хочу выделить его, заменив его фоновое изображение назад. Если щелкнуто то же самое выделенное div, я хочу выделить его.

Мой текущий метод заключается в том, чтобы сделать это через toggleClass, и мне удалось поменять класс div, на который я нажал, но не для замены остальных.

мне удалось это раньше с div элементами, что все замены к тому же классу, используя функцию .not, но я изо всех сил, чтобы сделать это с помощью div элементов, которые используют индивидуальные, конкретные классы.

JSFiddle версия здесь: https://jsfiddle.net/el_simmo/8cnu776j/3/

$(document).ready(function(){ 
    var theboxes = $("#svg1 #svg2 #svg3"); 
    var clickclasses = $("svg1classclick svg2classclick svg3classclick"); 

    $("[id^='svg']").on("click", function(){ 
     var thissvg = $(this); 
     var svgclick = $(this).attr("id") + "classclick"; 
     thissvg.toggleClass(svgclick); 
     theboxes.not(thissvg).removeClass(clickclasses); 
    }); 
}); 

Answer 1

Вы можете массово улучшить вашу логику и засыхают кода с использованием общих классов , Во-первых, применить общий класс для всех div элементов, которые вы хотите быть интерактивными, в моем примере I пользователь svgContainer:

<div> 
    <div id="svg1" class="svgContainer"></div> 
</div> 
<div> 
    <div id="svg2" class="svgContainer"></div> 
</div> 
<div> 
    <div id="svg3" class="svgContainer"></div> 
</div> 

Оттуда вы можете использовать следующую более простую логику, чтобы переключить подсветку и выключается с одиночный highlight класс:

$(".svgContainer").on("click", function() { 
    $(this).toggleClass('highlight'); 
    $('.svgContainer').not(this).removeClass('highlight'); 
}); 

.svgContainer { 
    height: 60px; 
    background-repeat: no-repeat; 
} 
#svg1 { 
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/teacher.svg"); 
} 
#svg1.highlight { 
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/teacher-purple.svg"); 
} 
#svg2 { 
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/student.svg"); 
} 
#svg2.highlight { 
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/student-purple.svg"); 
} 
#svg3 { 
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/support.svg"); 
} 
#svg3.highlight { 
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/support-purple.svg"); 
} 

Working fiddle

Обратите внимание на использование составных кл ass селекторов в CSS означает, что вам нужно всего лишь переключить один класс, что значительно упрощает JS-код.

Answer 2

Вы должны использовать общий класс между элементами. В этом случае я использовал класс .clicked для выделенных элементов и .svg-wrapper для всех элементов. При этом вы можете легко выбрать элементы, а также добавить/удалить класс из элементов.

Updated Example

$('.svg-wrapper').on('click', function() { 
    $(this).toggleClass('clicked'); 
    $('.svg-wrapper').not(this).removeClass('clicked'); 
}); 

Затем вы можете обновить CSS, чтобы стилизовать кликали варианты:

#svg1 { 
    /* Initial background */ 
} 
#svg1.clicked { 
    /* Clicked background */ 
}