Question

我最近在这里问了一个问题：

并且答案确定我的Javascript函数在全局范围内并且未在document.ready中找到。我使用VB.NET构建显示的链接，其中一些代码如下：

sb.Append("<div class=""img-thumbnail"">")
                sb.Append("<a href=""javascript:productPopup('" & Trim(dr.Item("StyleDescription")) & "');"" class=""thumbnail""><img src=""http://placehold.it/100x100"" /></a><h4 class=""thumbnail caption"">" & dr.Item("StyleDescription") & "</h4>")
                sb.Append("<center>" & dr.Item("ststy") & "</center><br />")
                sb.Append("<center>Price: " & FormatCurrency(dr.Item("lowprice"), 2) & " MSRP: " & FormatCurrency(dr.Item("lowMSRP"), 2) & "</center>")
                sb.Append("</div><!-- thumbnail --></div><!-- col-md-2 -->")

现在有人告诉我，为了把我的函数放在document.ready中，我应该使用JQuery来处理链接的点击。我的问题是：

我需要将StyleDescription传递给函数，以便我可以使用AJAX从我的数据库中获取与该产品相关的数据。我如何制作JQuery，以便无论点击哪个链接，它都能正确获取此信息？因此，假设我有这些链接：

<a href="javascript:showProductPopup('STY5901');">Green T-Shirt</a>
<a href="javascript:showProductPopup('STY5915');">Red T-Shirt</a>

如何将其转换为让JQuery处理它并仍然获得正确的StyleDescription值，如上面的链接所示？

Answer 1

您可以将样式编号作为锚点的属性：

<div><a class="product" s="STY5901" href="javascript:void(0);">Green T-Shirt</a></div>
<div><a class="product" s="STY5915" href="javascript:void(0);">Red T-Shirt</a></div>

然后在点击事件中获取属性值：

$(document).ready(function(){
    $(".product").click(function(){
        showProductPopup($(this).attr("s"));
    });
});

function showProductPopup(s){
    console.log("called showProductPopup with value: " + s);
}

如何制作链接，以便它们由document.ready中的JQuery处理，而不是全局范围

1 个答案: