如何添加类 onClick 和删除类

Question

这个标题已经全部问好了，但是我的问题与其他主题不同。

我有一个生成我的 div 的函数：

function createInventory(response)
{
  var trHTML = '';
  $.each(response, function (i, item) {
    //console.log(item.name+": "+item.quantity);
    if(item.quantity==null)
    {
      item.quantity="";
    }
    trHTML+='<div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used'+i+'">'+item.name+"<br>"+item.quantity+'<div class="itemoption"><button  id="sell-'+i+'" onclick="sellItem(this.id)" type="button">Sell</button><button id="info'+i+'">Info</button></div></div>';
  });
  $('.inventory-items').html(trHTML);

}

在html中应该是这样的：

.inventory
{
  position: relative;
  top:60%;
  left:50%;
  width:400px;
  height:600px;
}

.inventory-items
{
  width:100%;
  height: 80%;
  background: black;
}

.inven-free
{
  width:24.5%;
  height: 24.5%;
  border:1px solid white;
  float:left;

}

#slot-used
{


}

#sellquantity
{
  width:140px;
  height: 80px;
  background-color: white;
  border:1px solid black;

}

.inventory-head
{
  width:100%;
  background-color: green;
  height: 5%;
  position: relative;
}

<div class="inventory">
   <div class="inventory-head"><input id=""><button>Sell</button></div>
   <div class="inventory-items">
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used1" class="active">
         Soff<br>29
         <div class="itemoption"><button id="sell-1" onclick="sellItem(this.id)" type="button">Sell</button><button id="info1">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used2" class="active">
         Clean-water<br>316
         <div class="itemoption"><button id="sell-2" onclick="sellItem(this.id)" type="button">Sell</button><button id="info2">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used3">
         Dirty-water<br>127
         <div class="itemoption"><button id="sell-3" onclick="sellItem(this.id)" type="button">Sell</button><button id="info3">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used4">
         Saaremaa<br>49
         <div class="itemoption"><button id="sell-4" onclick="sellItem(this.id)" type="button">Sell</button><button id="info4">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used5" class="active">
         Glamur<br>6
         <div class="itemoption"><button id="sell-5" onclick="sellItem(this.id)" type="button">Sell</button><button id="info5">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used6">
         Laudur<br>25
         <div class="itemoption"><button id="sell-6" onclick="sellItem(this.id)" type="button">Sell</button><button id="info6">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used7">
         Lurker<br>
         <div class="itemoption"><button id="sell-7" onclick="sellItem(this.id)" type="button">Sell</button><button id="info7">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used8">
         Obi<br>
         <div class="itemoption"><button id="sell-8" onclick="sellItem(this.id)" type="button">Sell</button><button id="info8">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used9">
         Savage<br>
         <div class="itemoption"><button id="sell-9" onclick="sellItem(this.id)" type="button">Sell</button><button id="info9">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used10">
         Savage<br>
         <div class="itemoption"><button id="sell-10" onclick="sellItem(this.id)" type="button">Sell</button><button id="info10">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used11">
         Savage<br>
         <div class="itemoption"><button id="sell-11" onclick="sellItem(this.id)" type="button">Sell</button><button id="info11">Info</button></div>
      </div>
      <div class="inven-free" id="slot-free  0">test</div>
      <div class="inven-free" id="slot-free  1">test</div>
      <div class="inven-free" id="slot-free  2">test</div>
      <div class="inven-free" id="slot-free  3">test</div>
      <div class="inven-free" id="slot-free  4">test</div>
   </div>
</div>

我正在使用 onclick 来了解我在不同盒子上的 ID 号。

我想将类添加到选定的框（当通过出售按钮选择时）。 现在我的问题是我无法从较旧的点击 id 中删除类。 他们都得到 active 类什么被点击了，但我不想要那个，我只希望被点击的那个有 @987654325 @class，如果点击新的，它应该删除最后一个。

无论如何，我的功能是在这里我如何添加类 atm：

function sellItem(clicked_id)
{
  var trHTML = '';
  var id=clicked_id.split("-")[1];

  $("#slot-used"+id).removeClass('active')
  $("#slot-used"+id).addClass('active')
  $("#slot-used"+id).toggleClass('active');

    trHTML+='<input id=""><button>Sell</button>';
    $(".inventory-head").html(trHTML);
}

Answer 1

您可以对代码进行几项改进：

1 - 从动态 html 中删除内联样式。所以从这个

trHTML+='<div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used'+i+'">'+item.name+"<br>"+item.quantity+'<div class="itemoption"><button id="sell-'+i+'" onclick="sellItem(this.id)" type="button">Sell</button><button id="info'+i+'">Info</button></div></div>';

到这里

.itemContainer {
    width:24.5%;
    height: 24.5%;
    border:1px solid red;
    float:left;
    color:white;
}

trHtml += '<div class="itemContainer" id="slot-used'+i+'">'+item.name+"<br>"+item.quantity+'<div class="itemoption"><button class="sellButton" id="sell-'+i+'" type="button">Sell</button><button id="info'+i+'">Info</button></div></div>';

2- 从您的内联 html 中删除您的点击，这真的很脆弱，主要是因为您使用的是动态内容并且枚举可能不同步。 （已经在顶部的html上完成了）

3-将 onclick 行为添加为代理，因此连接完全与内容无关（并且可以用于动态内容），并使用按钮的标记类（已添加一个）和新的 .itemContainer。使用closest 找到合适的容器

$(document).ready(function () {
   $(".inventory-items").delegate("button.sellButton", "click", function(e) {
     $(".itemContainer").removeClass("active");
     $(this).closest(".itemContainer").addClass("active");
   });

});

不再拆分 ID。该代码将找到正确的 div 并将其标记为活动。

希望这会有所帮助。问候

Answer 2

为所有插槽/盒子添加一个类，例如 class="handle" id="slot-used2"

然后onClick，在选择一个插槽/盒子之前，取消选择所有具有类的插槽/盒子：'handle'

$(".handle").removeClass('active');
$("#slot-used"+id).addClass('active');

如果您有数十万个插槽/盒子，并且担心盲目地对所有插槽/盒子执行 removeClass()，那么您可以稍微修改代码以使其更精确，如下所示：

$(".handle.active").removeClass('active');
$("#slot-used"+id).addClass('active'); 

Answer 3

在.inventory-items 下，您拥有所有框。因此，您可以简单地使用下面的选择器指向活动框，然后删除该类。

  $(".inventory-items .active").removeClass('active');

你的函数应该是这样的：

 function sellItem(clicked_id)
{
  var trHTML = '';
  var id=clicked_id.split("-")[1];

  $(".inventory-items .active").removeClass('active');
  $("#slot-used"+id).addClass('active');

  trHTML+='<input id=""><button>Sell</button>';
  $(".inventory-head").html(trHTML);
}

Above 将从当前单击的元素中删除活动。如果想要切换效果，则需要使用.not() 选择器。

function sellItem(clicked_id)
{
  var trHTML = '';
  var id=clicked_id.split("-")[1];

  $(".inventory-items .active").not("#slot-used"+id).removeClass('active');
  $("#slot-used"+id).toggleClass('active');

  trHTML+='<input id=""><button>Sell</button>';
  $(".inventory-head").html(trHTML);
}

Answer 4

看起来你已经有了一些不错的答案，但这是我的 2 美分，可能更简单的答案：

var item;

function onClickMethod(e) {
    if ( item ) {
        item.removeClass('active');
    }

    item = $(e.target);

    item.addClass('active');
};

$('slotItemsorWhatever').click(onClickMethod)