Javascript 如何添加类onClick和删除类

这个题目已经问过了，但我的问题与其他题目不同

我有一个生成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);

}

卖
Soff
29
销售信息
清洁水
316
销售信息
脏水
127
销售信息
萨雷马
49
销售信息
格拉穆尔
6
销售信息
劳杜尔
25
销售信息
潜伏者

销售信息
Obi

销售信息
野蛮的

销售信息
野蛮的

销售信息
野蛮的

销售信息
测试
测试
测试
测试
测试

将类添加到所有插槽/框中，例如class=“handle”id=“slot-used2”

然后再次单击，在选择插槽/盒之前，取消选择所有具有“handle”类的插槽/盒

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

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

$(".handle.active").removeClass('active');
$("#slot-used"+id).addClass('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);
}

---

向所有插槽/方框添加一个类，例如class=“handle”id=“slot-used2”

然后再次单击，在选择插槽/盒之前，取消选择所有具有“handle”类的插槽/盒

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

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

$(".handle.active").removeClass('active');
$("#slot-used"+id).addClass('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);
}

---

在

.inventory items

下，您拥有所有的箱子。所以您可以简单地使用下面的选择器来指向活动框&然后删除该类

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

您的函数应该如下所示：

$(".handle.active").removeClass('active');
$("#slot-used"+id).addClass('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);
}

函数sellItem（单击\u id）
{
var trHTML=''；
变量id=单击的_id.split（“-”[1]；
$（“.inventory items.active”）.removeClass（'active'）；
$（“#已使用插槽”+id）.addClass（'active'）；
trHTML+='Sell'；
$（“.inventory head”）.html（trHTML）；
}

以上内容将从当前单击的元素中删除活动元素。如果想要切换效果，则需要使用选择器

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

函数sellItem（单击\u id）
{
var trHTML=''；
变量id=单击的_id.split（“-”[1]；
$（“.inventory items.active”）.not（“#slot used”+id）。removeClass（'active'）；
$（“#已使用插槽”+id）.toggleClass（'active'）；
trHTML+='Sell'；
$（“.inventory head”）.html（trHTML）；
}

在

下。库存物品

您拥有所有箱子。所以您可以简单地使用下面的选择器来指向活动框&然后删除该类

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

您的函数应该如下所示：

$(".handle.active").removeClass('active');
$("#slot-used"+id).addClass('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);
}

函数sellItem（单击\u id）
{
var trHTML=''；
变量id=单击的_id.split（“-”[1]；
$（“.inventory items.active”）.removeClass（'active'）；
$（“#已使用插槽”+id）.addClass（'active'）；
trHTML+='Sell'；
$（“.inventory head”）.html（trHTML）；
}

以上内容将从当前单击的元素中删除活动元素。如果想要切换效果，则需要使用选择器

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

函数sellItem（单击\u id）
{
var trHTML=''；
变量id=单击的_id.split（“-”[1]；
$（“.inventory items.active”）.not（“#slot used”+id）。removeClass（'active'）；
$（“#已使用插槽”+id）.toggleClass（'active'）；
trHTML+='Sell'；
$（“.inventory head”）.html（trHTML）；
}

您可以对代码做以下几点改进：

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

trHTML+=''+项目名称+“
”+项目数量+'SellInfo'

对此

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

trHtml+=''+项目名称+“
”+项目数量+'SellInfo'

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

3-将onclick行为作为代理添加到上，这样连接就完全与内容无关（并且可以用于动态内容），并将标记的类用于按钮（已经添加了一个）和新的
.itemContainer
。使用
最近的
查找正确的容器

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

});

没有更多的分裂ID。该代码将找到正确的div并将其标记为活动

希望这有帮助。关于
您可以对代码做以下几点改进：

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

trHTML+=''+项目名称+“
”+项目数量+'SellInfo'

对此

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

trHtml+=''+项目名称+“
”+项目数量+'SellInfo'

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

3-将onclick行为作为代理添加到上，这样连接就完全与内容无关（并且可以用于动态内容），并将标记的类用于按钮（已经添加了一个）和新的
.itemContainer
。使用
最近的
查找正确的容器

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

});

没有更多的分裂ID。该代码将找到正确的div并将其标记为活动

希望这有帮助。“问候”
看起来你已经有了一些像样的答案，但这是我的2美分，可能是一个更简单的答案：

var item;

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

    item = $(e.target);

    item.addClass('active');
};

$('slotItemsorWhatever').click(onClickMethod)

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

var item;

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

    item = $(e.target);

    item.addClass('active');
};

$('slotItemsorWhatever').click(onClickMethod)