Переключить активный класс по нажатию кнопки

Question

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

Обратите внимание, что разметка HTML и Jquery должна оставаться прежней, поскольку она является компонентом большей функции на месте.

var uniqueId = 1;
$(function() {
  $(".btn--new").click(function() {
    var copy = $("#s_item").clone(true, true);
    var formId = "item_" + uniqueId;
    copy.attr("id", formId);
    $("#s_list").append(copy);
    $("#" + formId)
      .find(".options")
      .each(function() {
        var list = $(this);
        $("[data-type='studio']").click(function() {
          list.find(this).removeClass("focus");
          $(this).addClass("focus");
        });

        var $catoptions = $(this).find(".button"),
          catrandom = ~~(Math.random() * $catoptions.length);
        $catoptions.eq(catrandom).click();
      });
    uniqueId++;
  });
});
$(document).ready(function() {
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
});

#s_item {
  display: none;
}

.options {
  display: flex;
}

.focus {
  color: green;
  font-weight: 900
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn--new">Clone</button>
<div id="s_list">
  <div class="post__item studio__item" action="" id="s_item">
    <div class="options">
      <button type="button" class="button" data-type="studio">Dog</button>
      <button type="button" class="button" data-type="studio">Cat</button>
      <button type="button" class="button" data-type="studio">Bird</button>
    </div>
  </div>
</div>

Answer 1

Вы имеете в виду, как это?

Обновленная демоверсия: https://jsfiddle.net/nd1owcmk/

Не изменяя свой код, просто добавьте один набор сценариев, который уберет класс фокуса кнопки без щелчка.

$(".button").click(function() {
    $(this).addClass("focus").siblings().removeClass('focus');
});

JQuery

var uniqueId = 1;
$(function() {
  $(".btn--new").click(function() {
    var copy = $("#s_item").clone(true, true);
    var formId = "item_" + uniqueId;
    copy.attr("id", formId);
    $("#s_list").append(copy);
    $("#" + formId)
      .find(".options")
      .each(function() {
        var list = $(this);
        $("[data-type='studio']").click(function() {
          list.find(this).removeClass("focus");
          $(this).addClass("focus");
        });

        var $catoptions = $(this).find(".button"),
          catrandom = ~~(Math.random() * $catoptions.length);
        $catoptions.eq(catrandom).click();
      });
        uniqueId++;
  }); 

  $(".button").click(function() {
    $(this).addClass("focus").siblings().removeClass('focus');
  });

});

$(document).ready(function() {
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
});

Answer 2

Для этого вам просто нужно позвонить removeClass('focus'), чтобы удалить его из всех предыдущих элементов, когда вы устанавливаете класс на последний элемент, по которому щелкнули.

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

$(function() {
  let $list = $('#list');
  
  $(".clone").click(function() {
    let $clone = $('.item:first').clone();
    $clone.find('.focus').removeClass('focus red blue');
    $clone.appendTo($list);
  });
  
  $list.on('click', '.options button', function() {
    $('.focus').removeClass('focus red blue');
    var $button = $(this);
    $button.addClass('focus ' + $button.data('color'));
  });
});

#s_item { display: none; }
.category__list { display: flex; }
.focus { color: white; }
.blue { background-color: blue; }
.red { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone">Clone</button>

<div id="list">
  <div class="item">
    <div class="options">
      <div class="category__item">
        <div class="input--studio">
          <button type="button" class="button" value="blue" data-filter="blue" data-rel="blue" data-type="item" data-color="blue">Blue</button>
        </div>
      </div>
      <div class="category__item">
        <div class="input--studio">
          <button type="button" class="button" value="red" data-filter="red" data-rel="red" data-type="item" data-color="red">Red</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

В функции document.ready я должен получить счетчик элемента триггера, после чего я сохранил его в localstorage. Используя этот элемент localstorage с условием if, я убрал фокус.

Надеюсь, это поможет вам.

var uniqueId = 1;
$(function() {
  $(".btn--new").click(function() {
    var copy = $("#s_item").clone(true, true);
    var formId = "item_" + uniqueId;
    copy.attr("id", formId);
    $("#s_list").append(copy);

    $("#" + formId)
      .find(".options")
      .each(function() {
        var list = $(this);
        $("[data-type='studio']").click(function() {
          list.find(this).removeClass("focus");
          $(this).addClass("focus");
        });

        var $catoptions = $(this).find(".button"),
          catrandom = ~~(Math.random() * $catoptions.length);
        $catoptions.eq(catrandom).click();
      });
    if (uniqueId > 3) {
      //localStorage.getItem("triggered")
      $("#" + formId + ' .button').removeClass('focus');
    }
    uniqueId++;
  });
});
$(document).ready(function() {
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  //localStorage.setItem("triggered", ($('#s_list .post__item ').length) - 1);
});

#s_item {
  display: none;
}

.options {
  display: flex;
}

.focus {
  color: green;
  font-weight: 900
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn--new" data-clone='true'>Clone</button>
<div id="s_list">
  <div class="post__item studio__item" action="" id="s_item">
    <div class="options">
      <button type="button" class="button" data-type="studio">Dog</button>
      <button type="button" class="button" data-type="studio">Cat</button>
      <button type="button" class="button" data-type="studio">Bird</button>
    </div>
  </div>
</div>