Question

试图显示“已添加产品！”用户选择“添加”的行右侧的消息。我现在的方式是：

var addToCart = function (idFromButton) {

            $.ajax({
                type: "POST",
                data: { prodID: idFromButton },
                url: '@Url.Action("Add", "ShoppingCart")',
                success: function (data)
                {
                    $('#BadgeIcon').html(data).fadeOut(1).fadeIn('fast');

                    $('.fakeLink-' + idFromButton).text("Product Added!").css("color", "green").fadeIn(600).fadeOut("slow");
                }
            });
        }

将“添加”按钮更改为绿色并将其淡化。

我还尝试在“添加”列的右侧创建一个新的行元素，并在那里添加消息。它有效，但在淡入淡出动画期间将“添加”按钮移动到左侧，更不用说它会在点击后永久删除最后一列的边框，直到刷新页面。

这是我的表：

<table class="table" id="table">
        <tr>
            <th>
                Product Name
            </th>
            <th>
                Price
            </th>
            <th>
                Image
            </th>
            <th>
                Add to Cart
            </th>
        </tr>

        @if (Model.Results.Any())
        {
            foreach (var item in Model.Results)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @item.Price.ToString("$0.00")
                    </td>
                    <td>
                        @if (item.ImageFile != null)
                        {
                            <img src="@Url.Content(item.ImageFile)" />
                        }
                    </td>
                    <td>
                        <input id="fakeLink" class="fakeLink-@item.ProductID" type="submit" value="Add" onclick="addToCart(@item.ProductID)" />
                    </td>

                </tr>
            }
        }
        else
        {
            <tr>
                <td colspan="4">No product found.</td>
            </tr>
        }

    </table>

非常感谢任何帮助。

Answer 1

您的代码看起来很好，除非您需要更新按钮的value，而不是文本。您可以使用val()方法。

$('.fakeLink-' + idFromButton).val("Product Added!")
                                       .css("color", "green").fadeIn(600).fadeOut("slow");

另外，我发现你的按钮在循环中有重复的id值。你的身份证应该是独一无二的。实际上你并不需要这个案例的ID。你可以使用像这样的非营养性javascript来简化代码

 <td>
      <input class="addBtn" data-product="@item.ProductID" type="submit" value="Add"  />
 </td>

并听取此类按钮的click事件（带有addBtn css类的按钮），您可以使用$(this)作为点击按钮的参考。

$(function() {

        $(".addBtn").click(function(e) {
            e.preventDefault();
            var _this = $(this);
            $.ajax({
                    type: "POST",
                    data: { prodID: _this.data("product")  },
                    url: '@Url.Action("Add", "ShoppingCart")',
                    success: function (data) {
                    _this.val("Product Added!").css("color", "green").fadeIn(600)
                                                                    .fadeOut("slow");
                    }
            });

        });
});

编辑：如果您想保持“添加”按钮不变，但希望在旁边显示消息，则可以执行此操作。

success: function (data) {
         var msg = $("<span />").html("Product added").css("display","none");              
         msg.appendTo(_this.parent()).fadeIn(500).fadeOut("slow");
 }

您可以根据需要将其他css样式应用于邮件范围。

在单个表行旁边显示确认消息

1 个答案: