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中它应该是这样的：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我使用onclick知道我在不同的盒子上有什么ID号。

我想将类添加到选定的框中（当按出售按钮选择时）。 现在我的问题是我无法从旧点击的ID中移除类。他们都获得了active类被点击的内容，但我不希望这样，我只想要点击的那个active类，如果点击新的，则应删除最后一个。

无论如何，我的功能就在这里我如何添加课程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行为添加为委托，因此连接完全是内容不可知的（并且可以用于动态内容），并使用标记类作为按钮（已添加一个）和新{{1} }。使用.itemContainer查找正确的容器

closest

不再分裂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下，您拥有所有方框。因此，您只需使用下面的选择器指向活动框和＆amp;然后删除该课程。

  $(".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);
}

上方将从当前点击的元素中删除活动。如果想要切换效果，则需要使用.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)

如何添加类onClick并删除类

4 个答案: