生成动态 id 到 javascript

Question

I'm trying to change the button value from "Add To Cart" to "Loading..." on a page with multiple products listed. The following code is the furthest I've gotten so far. The only problem is that it changes all button values and not the certain one that's being clicked on the page.

<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>

The button ID's are dynamic and generated by the CMS (aspdnSF). This is how the code looks like in the XML file:

<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>

I'm not so familiar with xsl elements so is there a way to get the ProductID and VariantID, which I assume is creating the id "AddToCartButton_41099_27479" in this particular item on the page?

Answer 1

You want, I think, to change the button that was clicked on and only that button? You need to use this , rather than the class selector. The class selector is saying "get all the elements that match this class on this page", which is what is happening.

So, using your code, it looks like this:

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

The better way to do it is not to use jQuery at all for this bit, but plain old Javascript:

this.value = "Loading...";