Question

当用户从表单中选择一个选项并单击“添加到购物车”链接时，我正在显示一个警报样式的div。我使用jQuery .before（）方法将用户表单选择的文本值添加到div。

我需要帮助的是双重的：

如果用户没有关闭div然后继续进行另一个选择，我该如何用新选择替换使用.before（）添加的元素？

此外，如果用户确实关闭了div，我怎么能“重置”它，这样如果他们要进行另一个选择（比如在另一页上），div将正确显示他们的最新选择。

以下是工作代码：

（Div被称为）

<div class="alert-box success">
    <span id="alert-copy"><?php echo ' tin of ' . $current_page["product_name"] . ' '; ?> added to cart  |  <a href="#" class="alert-btn-cart">View Cart</a></span>
    <a href="" class="close">&times;</a>
</div>

（当前jQuery）

<script type="text/javascript">
    $("div.alert-box").hide(); 
    $("input.button.small.radius.submit").click(function(){
    $("#alert-copy").before('<span>' + $('select option:selected').html().split("-")[0] + '</span>');
    $("div.alert-box").show("normal");
</script>

为了它的价值，我使用Zurbs Foundation（V3）作为警报div。

此外，您可以通过客户端实时网站（目前正在使用'Colorbox'）查看选择表单/添加到购物车链接的当前构造，但是我将立即转到上述样式可以解决这个问题。）

http://campbellssweets.com/shop/popcorn/product.php?subject=Bacon+and+Cheddar+Popcorn

由于

Answer 1

$("div.alert-box").hide(); 
$("input.button.small.radius.submit").click(function(){
var content = $('<span>' + $('select option:selected').html().split("-")[0] + '</span>');
$("#alert-copy").before(content);
$("div.alert-box").show("normal");
$("#remove").click(function(){ content.remove(); });

然后点击#remove删除它。

如何删除使用before（）方法添加的元素

1 个答案: