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

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 应该是唯一的。实际上，对于这种情况，您实际上并不需要 Id。您可以使用像这样的普通 javascript 来简化您的代码

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

并监听该类型按钮的点击事件（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 样式应用于消息范围。