代码之家  ›  专栏  ›  技术社区  ›  rob.m

如何使用按钮切换从数组中添加/删除对象?

  •  0
  • rob.m  · 技术社区  · 6 年前

      var countryArray = [];
      var countryName = " ";
      $("#africa, #europe, #asia, #america").on("click", function() {
        countryName = $(this).attr("id");
        countryArray.push(countryName);
        $("span").attr("data-country", $.unique(countryArray.sort()));
      });
    
    4 回复  |  直到 6 年前
        1
  •  0
  •   vicbyte    6 年前

    不是每次都推到数组,而是检查键是否已经存在,如果已经存在, splice

    var countryArray = [];
    var countryName = " ";
    $("#africa, #europe, #asia, #america").on("click", function() {
        countryName = $(this).attr("id");
        let index = countryArray.indexOf(countryName);
        if (index >= 0) {
            countryArray.splice(index, 1);
        } else {
            countryArray.push(countryName);
        }
        console.log(countryArray.sort());
        $("span").attr("data-country", countryArray.sort());
    });
    div {
      display: inline-block;
      width: 50px;
      height: 50px;
    }
    #africa {
      background: red;
    }
    #europe {
      background: green;
    }
    #asia {
      background: blue;
    }
    #america {
      background: black;
    }
    
    .as-console-wrapper {
      width: 100%;
      height: 100px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="africa"></div>
    <div id="europe"></div>
    <div id="asia"></div>
    <div id="america"></div>
        2
  •  1
  •   Marcelo Myara    6 年前
    var countryArray = [];
    var countryName = " ";
    $("#africa, #europe, #asia, #america").on("click", function() {
      countryName = $(this).attr("id");
    
      let itemPos = countryArray.indexOf(countryName);
      if (itemPos < 0)
        countryArray.push(countryName);
      else 
        countryArray.splice(itemPos, 1)
      $("span").attr("data-country", $.unique(countryArray.sort()));
    });
    
        3
  •  1
  •   gaetanoM    6 年前

    因为 是我建议将countryArray转换为对象的数据属性。

    这样,代码将是:

    var countryArray = {};
    var countryName = " ";
    $("#africa, #europe, #asia, #america").on("click", function() {
        if (countryArray[this.id] === undefined) {
            countryArray[this.id] = true;
        } else {
            delete countryArray[this.id];
        }
        $("span").data("country", countryArray);
        console.log(Object.keys(countryArray).join(', '));
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="africa">africa</button>
    <button id="europe">europe</button>
    <button id="asia">asia</button>
    <button id="america">america</button>
    <span></span>
        4
  •  0
  •   Roko C. Buljan    6 年前

    .splice(index, itemsNum) (要删除索引中的项)可以删除 $.unique .

    var arr = [];
    
    $(".btn").on("click", function() {
    
      var i = arr.indexOf(this.id);
      i>-1 ? arr.splice(i, 1) : arr.push(this.id);
      $("span").attr("data-country", arr.sort());
      
    });
    span:after { content: attr(data-country); }
    <button class="btn" id="africa">africa</button>
    <button class="btn" id="europe">europe</button>
    <button class="btn" id="asia">asia</button>
    <button class="btn" id="america">america</button>
    <span data-country=""></span>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>