jQuery - Get <文本通过变量ID

jQuery - Get <p> text by variable ID

本文关键字：变量 ID 文本 Get jQuery      更新时间：2023-09-26

下面是我的代码:

var itemCount = 0;
var addTo = "";
$(".add").click(function(){
    alert($(this).attr('id'));
    var itemClicked = $(this).attr('id');
    var a = parseInt(itemClicked);
    alert($(".price").find('#' + a).text());
    itemCount = itemCount + 1;
  });

和

<div class="col-sm-5 col-md-4 col-sm-2">
  <div class="thumbnail">
    <img src="..." alt="...">
    <div class="caption">
      <h3 class="item-header" id="1">iPhone</h3>
      <p>...</p>
      <p class="hidden" id="1">1</p>
      <p class="price" id="1">19.95</p>
      <p><button class="btn btn-primary add" role="button" id="1">Add to cart</button> <a href="#" class="btn btn-default" role="button">More</a></p>
    </div>
  </div>
</div>

我想做的是写一个函数，找出哪个按钮触发了这个函数，并检索按钮的相应价格。在这种情况下，我按了1，我想要的价格与第1项一致。

当我执行alert(a);然后我检索1的数字。所以我猜下面这行有问题，只是想不出是什么……

alert($(".price").find('#' + a).text());

也许您应该添加一个data-price属性(或引用您的实际数据的东西)。我不认为这是一个很好的做法，依赖于一些段落标签的值。最好是把显示数据和内部数据分开。

您可以像这样访问data-price:

$('.button').click(function(e) {
  console.log(e.target.getAttribute('data-price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Shop</h1>
<p>iPhone 7</p>
<p>price € 110</p>
<button data-price="110" class="button">Add</button>

你不需要id:

$("button.add").click(function(){
  var $card = $(this).parents("div.caption");
  alert("adding good id:"+$card.children("input.good-id").val() + " with price: " + $card.children("p.price").text());
  /* note - don't send price to backend,
  it can be easily corrected in browser before click,
  send only id of the good, and get price from DB */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-4 col-sm-2">
  <div class="thumbnail">
    <img src="..." alt="...">
    <div class="caption">
      <h3 class="item-header">iPhone</h3>
      <p>...</p>
      <input type="hidden" class="good-id" name="goodId" value="1">
      <p class="price">19.95</p>
      <p><button class="btn btn-primary add" role="button">Add to cart</button> <a href="#" class="btn btn-default" role="button">More</a></p>
    </div>
  </div>
</div>

我更新了你的html标记来使用数据属性。这样，你方就更容易选择某些商品所需的价格。

<p class="hidden" data-item="1">1</p>
<p class="price" data-price="1">19.95</p>
演示:

$('.add').on('click', function() {
    var itemId = $(this).attr('id');
    var itemPrice = $('.price[data-price="'+ itemId +'"]').text();
    alert(itemPrice);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-4 col-sm-2">
    <div class="thumbnail">
        <img src="..." alt="...">
        <div class="caption">
            <h3 class="item-header" id="1">iPhone</h3>
            <p>...</p>
            <p class="hidden" data-item="1">1</p>
            <p class="price" data-price="1">19.95</p>
            <p>
                <button class="btn btn-primary add" role="button" id="1">Add to cart</button> <a href="#" class="btn btn-default" role="button">More</a></p>
        </div>
    </div>
</div>

相关文章：