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

你可以像巴西方式那样做，我们称之为＆＃34; Gambiarra＆＃34;

$('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>有一个＆＃34;后meta-ab＆＃34;类。所以当你说：

$('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.
});

现在明白了吗？

一页中的数百个按钮具有相同的名称和相同的ID，如何区分？

1 个答案: