javascript - Javascript 警报仅针对表中的第一行启动

Question

我试图在每次单击按钮时发出警报，这是表格中的一列。

但是，只有当用户单击顶行中的按钮时，警报才会起作用。它下面的所有行都不起作用。为什么？！

<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>



    <td id ="Buy">
                <a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
            </td>


<script type="text/javascript">
$('#Buy').click(function() {
   var myPart = $('#part-name').text();
   alert (myPart);
});
</script>

id="Buy"注意我在td标签和标签中都尝试过a。

Answer 1

如果要绑定到多个 DOM 元素，请绑定到它们共享的类（创建一个新类并在每个元素上使用该类）。

您的 DOM 结构似乎有些混乱，但如果我理解正确，这应该可以。

<span class="inline" id="part-name" class="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>

<td class="buy" id ="Buy">
            <a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
        </td>


<script type="text/javascript">
$('.buy').click(function() {
   var myPart = $(this).closest('tr').children('.part-name').text();
   alert (myPart);
});
</script>

Answer 2

而不是 ID“购买”，给类名“购买”，然后使用下面的代码

 $('.Buy').on('click',function(){
     alert($('#part-name').text());
 });

Answer 3

这是因为您正在通过 id 选择 s。Id 应该是唯一的，所以 jQuery 抢占了第一个。如果你使用类，它会工作得更好。

<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>

<td class='Buy'>
  <a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>


<script type="text/javascript">
$('.Buy').click(function() {
  var myPart = $('#part-name').text();
  alert (myPart);
});
</script>

Answer 4

也许你可能想做这样的事情：

   <span class="inline" id="part-name-{{partID}}" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>



    <td class ="Buy">
                <a class="btn btn-warning" href="{{offer.buynow_url}}" partId="{{partID}}">BUY NOW </a>
            </td>


<script type="text/javascript">
$('.Buy').click(function() {
   var myPart = $("#part-name-"+$(this).attr("partId")).text();
   alert (myPart);
});
</script>

除非您使用 HTML5，否则这将破坏验证。