时间戳

首页 > 解决方案 > 一旦切换应用激活或禁用，从列表中追加或删除项目？

javascript - 一旦切换应用激活或禁用，从列表中追加或删除项目？

问题描述

$(document).ready(function() {
  var materials = [];
  var limit = $("#upper").val();
  $("#upper").change(function() {
    limit = $(this).val();

  });

  $(".u").click(function() {
    var color = $(this).attr('data-color');
    var id = $(this).attr('id');
    
    if (limit > $('.upper :not(.u)').length) 
    {
      $(this).css('background', $(this).attr('data-color'));
      var $el = $(this).toggleClass("u");
      console.log("added");
    } else if (!$(this).hasClass('u')) {
      var $el = $(this).toggleClass("u");
      console.log("removed");
    }
  });
});
.u {
  background: #FFFFFF!important;
  color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="upper" type="number" min="1" max="9" class="tbox_style" value="1">

<div class="contents upper">
  <div class="u" id="am" data-color="red">Upper Material 1</div>
  <div class="u" id="bm" data-color="yellow">Upper Material 2</div>
  <div class="u" id="cm" data-color="blue">Upper Material 3</div>
</div>
<div class="hidden">
    <input type="hidden" name="u-selected" id="u-selected" value="">
 </div>

当上限设置为 1 -> 记录added或removed工作正常

目前的问题是：

当上限更改为 2 或更多时 -> 日志added或removed工作，意外，如下运行

在此处输入图像描述

我的目标是：

标签： javascriptjquery

解决方案

您应该将处理正常情况和边界情况的逻辑分开（not-class-u 的数量超过limit）

$(document).ready(function() {
  var materials = []
  var limit = $("#upper").val()
  $("#upper").change(function() {
    limit = $(this).val()
  })

  $(".u").click(function() {
    var color = $(this).attr("data-color")
    var id = $(this).attr("id")
    var numberOfNotClassU = $(".upper :not(.u)").length

    if (limit <= numberOfNotClassU) {
      if (!$(this).hasClass("u")) {
        var $el = $(this).toggleClass("u")
        console.log("removed")
      }
      return
    }

    if (!$(this).hasClass("u")) {
      var $el = $(this).toggleClass("u")
      console.log("removed")
    } else {
      $(this).css("background", $(this).attr("data-color"))
      var $el = $(this).toggleClass("u")
      console.log("added")
    }
  })
})
.u {
  background: #FFFFFF!important;
  color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="upper" type="number" min="1" max="9" class="tbox_style" value="1">

<div class="contents upper">
  <div class="u" id="am" data-color="red">Upper Material 1</div>
  <div class="u" id="bm" data-color="yellow">Upper Material 2</div>
  <div class="u" id="cm" data-color="blue">Upper Material 3</div>
</div>
<div class="hidden">
  <input type="hidden" name="u-selected" id="u-selected" value="">
</div>

推荐阅读