检查动态内容（json）的类是否仍然存在

我正在构建购物车，并且在点击添加按钮后，物品图像将以可视方式飞入购物车，并将从商店中移除。现在，我想在商店为空时显示一些html内容。我已经开始了（检查下面的ajaxComplete函数）。您可能会看到这是一个动态内容，因此必须检查类“item”是否存在，如果不存在，它将返回语句$（“＃mobile”）。html（“商店中没有商品”）。任何人都知道如何解决这个问题。检查动态内容（json）的类是否仍然存在

var smartphones = [{ 
 
    rom: 'rom1', 
 
    image: 'image1.jpg', 
 
    alt_image: 'alt_image1.jpg' 
 
}, { 
 
    rom: 'rom2', 
 
    image: 'image2.jpg', 
 
    alt_image: 'alt_image2.jpg' 
 
}]; 
 

 
function renderSmartphones() { 
 
    var newContent = ""; 
 
    for (var i = 0; i < smartphones.length; i++) { 
 
    newContent += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 box item">'; 
 
    newContent += '<div class="rom">' + smartphones[i].rom + '</div>'; 
 
    newContent += '<img src="' + smartphones[i].image + '" class="image" alt="' + smartphones[i].alt_image + '" />'; 
 
    newContent += '<button class="add-to-cart" type="button">add to cart</button>'; 
 
    newContent += '</div>'; 
 
    } 
 
    $("#mobile").html(newContent); 
 
} 
 

 
$(document).on("click", ".add-to-cart", function() { 
 
\t var cart = $("#shopping-cart"); 
 
\t var item = $(this).closest(".item"); 
 
\t var imageToDrag = $(this).closest(".item").find(".image"); 
 
\t \t if(imageToDrag) { 
 
    \t \t var imageClone = imageToDrag.clone() 
 
     .offset({ 
 
      top: imageToDrag.offset().top, 
 
      left: imageToDrag.offset().left 
 
     }) 
 
\t  .css({ 
 
\t  \t "background": "transparent", 
 
      "position": "absolute", 
 
      "height": "150", 
 
      "width": "150", 
 
      "z-index": "100" 
 
     }) 
 
     .appendTo($("body")) 
 
\t \t .animate({ 
 
\t \t \t "top": cart.offset().top -70, 
 
\t \t \t "left": cart.offset().left -5, 
 
\t \t \t "width": 80, 
 
\t \t \t "height": 80 
 
\t \t }, 1000); 
 

 
\t \t setTimeout(function(){ //When the item is added to the cart, the item will be removed after 2 seconds 
 
\t \t \t item.remove(); 
 
\t \t }, 2000); 
 

 
\t \t imageClone.animate({ //image will fly to cart 
 
      "width": 0, 
 
      "height": 0 
 
     }, function() { 
 
      $(this).detach(); // removes selected element including all text and child nodes. However it keeps data and event. 
 
     }); 
 
\t } 
 
}); 
 

 
$(document).ajaxComplete(function() { 
 
\t if($("#mobile").closest(".item")) { 
 
\t \t $("#mobile").html(""); 
 
\t } else { 
 
\t \t $("#mobile").html("No item in store anymore"); 
 
\t } 
 
}); 
 

 
renderSmartphones();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <span><i id="shopping-cart" alt="shopping-cart-icon"></i></span> 
 

 
    <div id="mobile"></div> 
 
    </div> 
 
</body>

来源

2016-11-02 Fresh developer

我相信你正在寻找以下行为。这里我们实际上是检查容器中存在的.item的计数。如果它的零，那么只有我们正在显示的消息。

var smartphones = [{ 
 
    rom: 'rom1', 
 
    image: 'image1.jpg', 
 
    alt_image: 'alt_image1.jpg' 
 
}, { 
 
    rom: 'rom2', 
 
    image: 'image2.jpg', 
 
    alt_image: 'alt_image2.jpg' 
 
}]; 
 

 
function renderSmartphones() { 
 
    var newContent = ""; 
 
    for (var i = 0; i < smartphones.length; i++) { 
 
    newContent += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 box item">'; 
 
    newContent += '<div class="rom">' + smartphones[i].rom + '</div>'; 
 
    newContent += '<img src="' + smartphones[i].image + '" class="image" alt="' + smartphones[i].alt_image + '" />'; 
 
    newContent += '<button class="add-to-cart" type="button">add to cart</button>'; 
 
    newContent += '</div>'; 
 
    } 
 
    $("#mobile").html(newContent); 
 
} 
 

 
$(document).on("click", ".add-to-cart", function() { 
 
    var cart = $("#shopping-cart"); 
 
    var item = $(this).closest(".item"); 
 
    var imageToDrag = $(this).closest(".item").find(".image"); 
 
    if (imageToDrag) { 
 
    var imageClone = imageToDrag.clone() 
 
     .offset({ 
 
     top: imageToDrag.offset().top, 
 
     left: imageToDrag.offset().left 
 
     }) 
 
     .css({ 
 
     "background": "transparent", 
 
     "position": "absolute", 
 
     "height": "150", 
 
     "width": "150", 
 
     "z-index": "100" 
 
     }) 
 
     .appendTo($("body")) 
 
     .animate({ 
 
     "top": cart.offset().top - 70, 
 
     "left": cart.offset().left - 5, 
 
     "width": 80, 
 
     "height": 80 
 
     }, 1000); 
 

 
    setTimeout(function() { //When the item is added to the cart, the item will be removed after 2 seconds 
 
     item.remove(); 
 

 
     checkItemPresence(); 
 

 
    }, 2000); 
 

 
    imageClone.animate({ //image will fly to cart 
 
     "width": 0, 
 
     "height": 0 
 
    }, function() { 
 
     $(this).detach(); // removes selected element including all text and child nodes. However it keeps data and event. 
 

 
    }); 
 
    } 
 
}); 
 

 
function checkItemPresence() { 
 
    if ($("#mobile").find(".item").length == 0) { 
 
    $("#mobile").html("No item in store anymore"); 
 
    } 
 
} 
 
$(document).ajaxComplete(function() { 
 
    checkItemPresence(); 
 
}); 
 

 
renderSmartphones();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <span><i id="shopping-cart" alt="shopping-cart-icon"></i></span> 
 

 
    <div id="mobile"></div> 
 
    </div> 
 
</body>

来源

2016-11-02 12:01:53 vijayP

是的，正是我一直在寻找。知道我在正确的轨道上，我有昨天键入相同的命名函数，但忘记调用函数。谢谢！ –

welcome @ user7087446 ...！ – vijayP

检查动态内容（json）的类是否仍然存在

回答

相关问题