Question

我正在构建一个购物车，点击添加按钮后，项目图像将在视觉上飞到购物车，并将自己从商店中移除。现在我想在商店空的时候显示一些html内容。我已经开始了（检查下面的ajaxComplete函数）。正如您可能会看到这是一个动态内容，因此必须检查类＆＃34; item＆＃34;存在，如果不存在，它将返回语句$（＆＃34; #mobile＆＃34;）。html（＆＃34;商店中没有商品＆＃34;）。谁知道如何解决这个问题。

＆＃13;

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();
		}, 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. 
        });
	}
});

$(document).ajaxComplete(function() {
	if($("#mobile").closest(".item")) {
		 $("#mobile").html("");
	} else {
		$("#mobile").html("No item in store anymore");
	}
});

renderSmartphones();

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: