Question

这是我的代码：

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项。

当我发出警报（a）时;然后我检索了1的数字。所以我想下面的一行有问题，只是无法弄清楚是什么......

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

Answer 1

您不需要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>

Answer 2

也许您应该添加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>

Answer 3

我更新了你的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>

jQuery - 按变量ID获取<p>文本

3 个答案: