生成动态 id 到 javascript

Question

我正在尝试在列出多个产品的页面上将按钮值从“添加到购物车”更改为“正在加载...”。 以下代码是迄今为止我得到的最远的代码。 唯一的问题是它会更改所有按钮的值，而不是页面上单击的某个值。

<span class="add-to-cart-buttons"> <input type="button" id="AddToCartButton_41099_27479" name="AddToCartButton_41099_27479" class="button call-to-action add-to-cart" value="Add to Cart">  </span>

JS：

<script type="text/javascript">
                $('.button').click(function(){
                $(".button").prop("value", "Loading...");
                    });
</script>

按钮 ID 是动态的，由 CMS (aspdnSF) 生成。 这是 XML 文件中代码的样子：

<div class="buy-button-beta">
                <xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>
                
            
            
            <script type="text/javascript">
                $('.button').click(function(){
                $(".button").prop("value", "Loading...");
                    });
                </script>

我对 xsl 元素不太熟悉，所以有没有办法获取 ProductID 和 VariantID，我假设它是在页面上的这个特定项目中创建 id“AddToCartButton_41099_27479”？

Answer 1

你想，我想，改变被点击的按钮，只有那个按钮？ 您需要使用this ，而不是 class 选择器。 class 选择器说“在此页面上获取与此 class 匹配的所有元素”，这就是正在发生的事情。

因此，使用您的代码，它看起来像这样：

$(this).prop("value", "Loading...");

更好的方法是完全不使用 jQuery，而是使用普通的旧 Javascript：

this.value = "Loading...";