单击按钮切换活动班级

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

要实现此目的，您只需在将类设置为最新单击的元素时调用removeClass('focus')即可将其从所有以前的元素中删除。

还请注意，您可以使用公共类而不是运行时生成的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 2

您的意思是这样吗？

更新的演示：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 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>