JQuery：根据当前项ID

Question

我的JQuery代码向链接返回相同的值，而不考虑当前的产品ID

购物车页面由[i]个产品组成，每个产品都有自己的productId。因为页面迭代并输出[i]产品数量，我无法在wishlist迭代中包含productId，这也是[i]数量的愿望清单。

所以我决定使用JQuery并选择属性来更改每个产品的链接，这样用户就可以点击并将产品插入到他们的愿望清单中。

每种产品的最终链接应为http://example.com/customer.do?addThisProductToWishList&productID=[i]&wishlistID=[i]

我已经尝试了下面的代码，但它不断迭代并输出一个非常长的链接，只保留一个productID存储到每个产品。

JQuery代码

$(".details").each(function() {
            var _href = $(".addThisProductToWishList").attr("href");
                $(".ProductID").each(function(){
                    var _theProductID = $(".ProductID").attr("data-id");
                     $(".addThisProductToWishList").attr("href", _href + '&productId=' + _theProductID + '&wishListID=');
            });
        });

修改

HTML CODE

    <input type="hidden" name="wishListID"/>
       <span class="wishListID" data-id="<js:text name="ProductID" />"></span>
        <ul class="dropdown-list">
                <js:iterate id="wishlists" collection="<%=wishListsCollection.getLists(new Integer(1))%>" >
                   <li class="dropdown-element">
                        <span data-id="<js:text name="wishList.wishListID"/>">
                        <js:text name="wishList.wishListName"/>
                         <js:a actionpath="/customer.do?action=addThisProductToWishList" name="product.productId"  class="addThisProductToWishList">
                            <app:msg key="product.add_to_wishlist" /> </js:a>
                                            </span>
                                    </js:iterate>
                                        </li>
                                </ul>

Answer 1

我认为你并没有提到目前的背景，这就是为什么你得到同样的价值。使用this获取当前上下文。我希望下面的例子可以帮到你。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.details').each(function() {
    var pID = $(this).attr('data-product-id');
    var wID = $(this).attr('data-wish-id');
    $(this).find('a').attr('href', 'http://example.com/customer.do?addThisProductToWishList&productID=' + pID + '&wishlistID=' + wID);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="details" data-product-id="1" data-wish-id="a">
  <a href="#">Product1</a>
</div>

<div class="details" data-product-id="2" data-wish-id="b">
  <a href="#">Product2</a>
</div>

<div class="details" data-product-id="3" data-wish-id="c">
  <a href="#">Product3</a>
</div>

＆＃13;

＆＃13;

＆＃13;