JQuery переключения между классами

Question

Если у меня есть два элемента div, где пользователи должны выбирать между двумя вариантами.

Я хотел бы показать, что пользователь щелкнул по нему, поэтому, когда пользователь нажимает на элемент, класс добавляет некоторые стили.

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

  $(".ind").on("click", ->
    $(this).toggleClass("selected")
  );

Надеюсь, кто-то может направить меня, спасибо!

Answer 1

$(".ind").on "click", ->
    $(this).siblings(".ind").removeClass("selected")
    $(this).toggleClass("selected")

Answer 2

Дайте обоим div один и тот же класс:

<div class="ind targetDiv">This is div 1</div>

<div class="targetDiv">This is div 2</div>

Тогда вы можете использовать jQuery:

$(".targetDiv").on("click", function() {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

демонстрация

Answer 3

Нужно было это для проекта, и обнаружил, что если вы щелкнете по уже выбранному элементу, он просто удалит класс все вместе.

Поэтому добавил это, надеюсь, кто-то может использовать это.

$(".view-type .type").click(function () {
        if (!$(this).hasClass("checked")) {
            $(this).addClass("checked").siblings(".type").removeClass("checked");
        }
    });

Answer 4

Вот мой пример http://jsfiddle.net/omegaiori/wbcTr/

$(".ind").click (function() {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});