Question

我可以在正确的方向上使用一个点。我有一个产品显示在购物车页面上，用于慈善捐赠。如果有人将捐赠添加到他们的购物车中，那么我已经能够删除捐赠选项，因为捐赠选项现在已经在购物车中。这样做是因为单击捐赠按钮后，页面会刷新，并将捐赠添加到购物车。我遇到的问题是，当有人从购物车中删除捐赠时，页面不会刷新，因此直到我手动刷新页面后，捐赠选项才会显示。我会发布一些代码，但是我没有任何代码，因为我不确定如何基本上以循环方式查看购物车的页面，以继续检查该商品是否在购物车中。

这是我用来检查捐款是否在购物车中的代码。

$(document).ready(function() {
var found = false;
$('.bd a').each(function(index, ele){
 if($(ele).html().indexOf('Charity Bucks') > -1){
     found = true;
 }
 })

 if(found){
 $('#divID').css('display','none');
 }
});

Answer 1

来自此stack

这是事件监听器，用于更改类.bd的元素

$("body").on('DOMSubtreeModified', ".bd", function() {
    // code here
});

尝试添加此代码：

 $("body").on('DOMSubtreeModified', ".bd", function() {
      $('.bd a').each(function(index, ele){
       if($(ele).html().indexOf('Charity Bucks') > -1){
           $('#divID').css('display','none');//or inline-block; or block; as your default css for this element
       }else{
         $('#divID').css('display','inline');
       }
     })
    });

Answer 2

该问题是由于缺少else语句引起的。在您的逻辑中，仅当找到慈善条目时才修改#divID元素，但如果不再找到慈善条目且已隐藏该元素，则不会修改。另外，我建议通过css类而不是直接通过css属性显示/隐藏元素。

$(document).ready(function() {
  $('#remove-donation-button').click(removeDonation());
  var found = false;
  $('.bd a').each(function(index, ele){
    if($(ele).html().indexOf('Charity Bucks') > -1){
      found = true;
    }
  })

  if(found){
    $('#divID').addClass("hide-charity");
  }
}); 

function removeDonation(){
  $('.hide-charity').removeClass('hide-charity');
  /** Actually remove */
}

Answer 3

我最终使用回调来解决我的问题

RoutingModel

JavaScript检查事件而无需刷新页面

3 个答案: