一页上百个同名同id的按钮，如何区分？

Question

我有一个问题，我有一个包含数百种产品的页面，每个都有“添加到购物车”按钮。 我的问题是所有按钮都具有相同的 ID 和相同的名称。 我在这里做的是当我想单击按钮时，产品名称会进入购物车。但我认为它不会起作用，因为 ID 和名称是相同的。 谁能告诉我如何解决这个问题？

代码示例：

    <li class="ms-tt grid_3" data-id="id-1" data-type="digital">
                        <div class="m-thumb entry-image hover-content">
                            <a href="#"><img src="images/jewellery-tools/casting-soldering1/14.jpg" alt='Flasks Stainless Steel Perforated C-16'></a>
                            <div class="image-overlay">
                                <div class="buttons-tt clearfix">
                                    <a class="permalink" href="#"><i class="icon-link"></i></a>
                                    <a class="zoom" href="images/jewellery-tools/casting-soldering1/14.jpg" data-gal="photo[portfolio]" title='Flasks Stainless Steel Perforated C-16'><i class="icon-resize-full"></i></a>
                                </div>
                            </div>
                        </div>
                        <p class="post-meta-ab"><span><a href="#">Flasks Stainless Steel Perforated C-16</a></span><br />
                        <span>Details: Flasks Stainless Steel Perforated For Casting 3" Dia X 5",6" & 7"</span><br />
                        <span><i class="icon-circle"></i>Shipping Weight: 750gms</span><br /><span><i class="icon-circle"></i>Price: &#8364; 17.00</span><br />
                        <span><i class="icon-circle"></i>Quantity: <input type="text" style="width:20px" maxlength="100" name="a1" id="a1" />
                        <input type="submit" value="Add" style="margin-top:-8px" class="btn btn-danger" name="asubmit" id="a1sub" /></span></p>
                    </li>

请告诉我如何解决这个问题？

P.S 有没有办法找到点击了哪个按钮？我不能用 $(this).clicked

Guerro 的技术帮了我大忙。请在下面查看他的答案。谢谢

Answer 1

你可以像巴西人那样做，我们称之为“Gambiarra”

$('input [type=submit]').click(function(){
   var productname = $(this).parent().find('.post-meta-ab a').html();
});

PS。如果您无法为您的 DOM 元素设置唯一 ID，请不要使用任何 ID。

基本上，对于您列出的每个产品，您都有以下结构：

<li class="ms-tt grid_3" data-id="id-1" data-type="digital">
                        <div class="m-thumb entry-image hover-content">
                            <a href="#"><img src="images/jewellery-tools/casting-soldering1/14.jpg" alt='Flasks Stainless Steel Perforated C-16'></a>
                            <div class="image-overlay">
                                <div class="buttons-tt clearfix">
                                    <a class="permalink" href="#"><i class="icon-link"></i></a>
                                    <a class="zoom" href="images/jewellery-tools/casting-soldering1/14.jpg" data-gal="photo[portfolio]" title='Flasks Stainless Steel Perforated C-16'><i class="icon-resize-full"></i></a>
                                </div>
                            </div>
                        </div>
                        <p class="post-meta-ab"><span><a href="#">Flasks Stainless Steel Perforated C-16</a></span><br />
                        <span>Details: Flasks Stainless Steel Perforated For Casting 3" Dia X 5",6" & 7"</span><br />
                        <span><i class="icon-circle"></i>Shipping Weight: 750gms</span><br /><span><i class="icon-circle"></i>Price: &#8364; 17.00</span><br />
                        <span><i class="icon-circle"></i>Quantity: <input type="text" style="width:20px" maxlength="100" name="a1" id="a1" />
                        <input type="submit" value="Add" style="margin-top:-8px" class="btn btn-danger" name="asubmit" id="a1sub" /></span></p>
                    </li>

在您的<li> 元素中，您有一个按钮，您有一个带有产品标题的<p>，您的<p> 有一个“post-meta-ab”类。 所以当你说：

$('input [type=submit]').click(function(){ //here you'r saying, "when any input submit get clicked execute the code above"
   var productname = $(this).parent().find('.post-meta-ab a').html(); // here you are saying, $(this) means the input submit clicked, and parent() means your <li>, and finally you tell to look for any element with the post-meta-ab class and look for the a inside it.
});

现在明白了吗？