这个题目已经问完了，但是我的问题和其他题目不一样。
我有一个生成我的 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 class what were/is clicked，但我不想要那个，我只想要被点击的一个有 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);
}
最佳答案
您可以对代码进行多项改进:
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-作为委托(delegate)添加 onclick 行为，因此连接完全与内容无关(并且可以用于动态内容)，并为按钮(已添加一个)和新的 .itemContainer 使用标记类.使用 closest找到合适的容器
$(document).ready(function () {
$(".inventory-items").delegate("button.sellButton", "click", function(e) {
$(".itemContainer").removeClass("active");
$(this).closest(".itemContainer").addClass("active");
});
});
不再拆分 ID。该代码将找到正确的 div 并将其标记为事件。
希望这对您有所帮助。问候
关于javascript - 如何添加类 onClick 和删除类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46105595/