Javascript 单击链接后刷新div内容

Prestashop v1.6默认引导主题，product-list.tpl文件

我有一个添加到cart和div的按钮，带有一些smarty代码：

<a class="ajax_add_to_cart_button" href="....">

<div id="div1">{if $added}Added{else}not added{/if}</div>

以及：

还有一些

编辑，这对我来说也不适用：

$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this:  $("#div1").load($(this).attr("href #div1"));*/
return false
});
});

EDIT2:当我尝试时，这段代码只工作了一半

$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});

为什么是一半？因为文本只在第一个产品中显示，无论我单击哪一个产品，我都会尝试将

html（）

切换到

load（）

或

refresh（）

，但随后就不起作用了

EDIT3

$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});


<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>

$（文档）.ready（函数（）{
var productid=“{product.id\u product}”
$（“.ajax\u添加到购物车按钮”）。单击（函数（）{
$（“#div1”+productid）.html（“结果重新加载成功”）；
});
});
{if$added}added{else}not added{/if}

---

这是所有产品中的显示信息，产品中的所有容器现在都有不同的id。

请尝试以下操作并检查其是否有效

$(function(){
 $(document).on('click', '.ajax_add_to_cart_button', function(e) {
    e.preventDefault();
    $("#one").load($(this).attr("href"));
    return false.
});

});

---

我注意到你选错了类别。也请检查一下。

嗯。。。我懂了。。。我猜你的问题是你对所有产品都使用相同的id。DOM“应该”有一个元素的唯一ID，请尝试另一种方法，可能是一个简单的类作为选择器，您不能对所有这些元素使用相同的ID:）

例如（我假设您的div有

mybeautifuldiv

类）：

---

如果您在有产品列表（分类页面等）的情况下尝试这样做，那么您需要针对一个适当的div。您可能不希望在div中使用id，而是使用class

<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>

若不是，那个么您可以遍历到产品的父div，并在其中找到您的自定义div。例如，在默认prestashop主题的类别页面中：

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function() {           
        $(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
    });
});

---

谢谢，但这不是我的工作，你有点后假，我也编辑我的第一篇文章与我的尝试。在div中添加您的解决方案后，所有网站内容和产品均未加载到购物车。您好，我不太明白您想做什么，因为您说仅针对第一个产品。。。不清楚，你能解释清楚吗？我有一个产品列表，每个产品都有这个字段

#div1

，当我将第三个产品添加到购物车时，

html（）

应该显示在第三个产品上，但它总是显示在第一个产品上。嗯。。。我懂了。。。我猜你的问题是你对所有产品都使用相同的id。DOM“应该”有一个元素的唯一ID，请尝试另一种方法，可能是一个简单的类作为选择器，您不能对所有这些元素使用相同的ID:）我尝试了另一种方法，但EDIT2的解决方案仍然不够，因为它是使用html（），但我希望刷新div内容，而不是显示自定义代码。我现在在代码中做了一些更改。所有产品中都会显示html（）中的信息。但“刷新div内容”是什么意思？是否使用其他内容刷新？

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function(){
        $(".mybeautifuldiv").html("result reloaded successfully");
    });
});

<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function() {
        $(this).find('.my-custom-div').html('Content updated!');
    });
});

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function() {           
        $(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
    });
});