Question

我正在提出新问题，因为我不清楚，我同意这一点。

因此，我点击了item-cards，如果您点击其中一个类名更改为selected，它还会将您点击的项目添加到cart。每个购物车项目后面都有X，如果您点击它，它会从购物车中删除该商品，但不会删除selected部分。如果我在那里添加了它将删除该类，那么它将从所有项目中删除它。例如，如果我在购物车中添加了2个商品并且我从购物车中删除了一个商品，那么它从所有商店中删除了selected类，但是我怎么能这样做它只会将其删除，具有相同的img标题？以下是一些例子：

选定项目HTML

<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
    <div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
    <div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
    <div class="center-align" style="padding:6%">
        <img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
        <div class="" 'floatvalue'="">Float: 0.11503319442272186
            <div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $110.52 (You save: $-39.06)</div>
            <div class="buyer-price center-align">$149.58</div>
        </div>
    </div>
</div>

代码，如果你点击X

$("#itemcart span").click(function() {
        $(this).parent().remove()

编码如何添加X

$("#itemcart div").each(function(){
if( $(this).children().length > 0){

} else{
$(this).append($("<span> X</span>"));
}
});

点击项目卡

 $(".item-card").click(function() {
       var itemnume = $(this).find("img").attr("title");
       var replaced = itemnume.split(' ').join('_');
       replaced = replaced.split('(').join('');
       replaced = replaced.split(')').join('');
       replaced = replaced.split('|').join('');

       if ($(this).hasClass('selected-item')) {
           $("#" + replaced).last().remove();
       } else {
        $("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
        $("#itemcart div").each(function(){
        if( $(this).children().length > 0){

        } else{
        $(this).append($("<span> X</span>"));
        }
        });

        $("#itemcart span").click(function() {
            $(this).parent().remove()
            $(".item-card").removeClass("red lighten-1 white-text selected-item");
            calculateTotal();
        });
       }
       $(this).toggleClass("red lighten-1 white-text selected-item");

       calculateTotal();
   });

Answer 1

这是一个带有虚假条目的运行代码段。您必须使标识符适应您的动态代码。

委托事件监听<ul>元素。聆听点击<ul><li><div><span>元素并向上移除<li> 2个父母。

<html>
  <body>
    <ul class="item-store">
      <li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
          <div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1000">
              <div class="iteam" style="text-decoration: underline;text-align: left">
                  Butterfly Knife | Crimson Web
              </div>
              <div class="condition" style="text-align: left;text-size:13px">
                  Field Tested
              </div>
              <div class="center-align" style="padding:6%">
                  <img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
                  <div class="" 'floatvalue'="">
                      Float: 0.11503319442272186
                      <div class="bitskinscomp" style="font-weight: normal;font-size:12px">
                          BitSkins Price: $110.52 (You save: $-39.06)
                      </div>
                      <div class="buyer-price center-align">
                          $149.58
                      </div>
                  </div>
              </div>
          </div>
      </li>
      <li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
          <div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1001">
              <div class="iteam" style="text-decoration: underline;text-align: left">
                  Butterfly Knife | Crimson Web
              </div>
              <div class="condition" style="text-align: left;text-size:13px">
                  Field Tested
              </div>
              <div class="center-align" style="padding:6%">
                  <img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
                  <div class="" 'floatvalue'="">
                      Float: 0.11503319442272186
                      <div class="bitskinscomp" style="font-weight: normal;font-size:12px">
                          BitSkins Price: $110.52 (You save: $-39.06)
                      </div>
                      <div class="buyer-price center-align">
                          $149.58
                      </div>
                  </div>
              </div>
          </div>
      </li>
    </ul>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

    <script>
//Code, if you click on X

$(".item-store").on('click', '.item-card span', (function() {
  $(this).parent().parent().remove();
}));

//Code how X is being added

//$(".item-cart div").each(function()
$(".item-card ").each(function()
{
  if( $(this).children().length > 0){
    $(this).append($("<span> x</span>"));
  } else{
    $(this).append($("<span> X</span>"));
  }
});
    </script>
  </body>
</html>

Answer 2

尝试此操作，将所选项目保存在数据中，然后点击：

$(".item-card").click(function() {
   var itemnume = $(this).find("img").attr("title");
   var replaced = itemnume.split(' ').join('_');
   replaced = replaced.split('(').join('');
   replaced = replaced.split(')').join('');
   replaced = replaced.split('|').join('');

   if ($(this).hasClass('selected-item')) {
       $("#" + replaced).last().remove();
   } else {
    var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
    $("#itemcart").append(cart_item);
    $("#itemcart div").each(function(){
    if( $(this).children().length > 0){

    } else{
    $(this).append($("<span> X</span>"));
    }
    });
    var self = $(this);
    cart_item.on('click', 'span', function() {
        $(this).parent().remove()
        self.removeClass("red lighten-1 white-text selected-item");
        calculateTotal();
    });
   }
   $(this).toggleClass("red lighten-1 white-text selected-item");

   calculateTotal();
});

JavaScript - 来自匹配img标题的removeClass？

2 个答案: