Question

我有一个产品页面列出了以列表格式列出的不同产品，我想要实现的是，如果我点击第一个产品，它将仅提供产品名称的警报，类似于产品2，仅产品名称应为product2应该在警报框中。到目前为止，我所做的是提供产品名称和警报价格。请帮忙

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".nosto-product-list-item a").each(function() {
    var href = $(this).attr("href");
    var target = $(this).attr("target");
    var text = $(this).text();      
    $(this).click(function(event) { 
        event.preventDefault(); 
        alert(text); 
        setTimeout(function() { 
            window.open(href,(!target?"_self":target));
        },300);
    });
});

});
</script>
<li class="nosto-product-list-item">

  <a class="nosto-li-link" href="#">

    <div class="nosto-product-image-link">
      <img class="nosto-product-image" src="images/product.jpg" alt="" title="">
    </div>


    <div class="nosto-product-info">
      <span class="nosto-product-name" id="nosto-product-name">Product Name </span>

      <div class="nosto-price">
          <span class="nosto-product-price nosto-old-price" id="222">229.00</span>
          <span class="nosto-product-price nosto-current-price">171.75</span>
                  </div>

    </div>

    </a><a class="nosto-button" href="#">Buy Now</a>


</li>
<li class="nosto-product-list-item">

  <a class="nosto-li-link" href="product1.php">

    <div class="nosto-product-image-link">
      <img class="nosto-product-image" src="images/product2.jpg" alt="" title="">
    </div>


    <div class="nosto-product-info">
      <span class="nosto-product-name">Product 2 Name</span>

      <div class="nosto-price">
                      <span class="nosto-product-price nosto-old-price">159.00</span>
          <span class="nosto-product-price nosto-current-price">111.30</span>
                  </div>

    </div>

    </a><a class="nosto-button" href="#">Buys Now</a>


</li>

http://jsfiddle.net/R5kVp/1/

Answer 1

这里＆＃39;这个＆＃39;指向锚，$（this）.text（）将包含锚内所有元素的所有文本。

要仅选择名称，请选择仅包含名称的元素。像Ehsan Sajjad所说的

var text = $(this).find('.nosto-product-name').text();

我也没有看到使用.each（）然后在里面注册一个处理程序的任何意义。此外，$（＆＃34; .nosto-product-list-item a＆＃34;）将选择具有该类的元素内的任何锚点。相反，你可以使用

$(".nosto-li-link").click(function() {
    event.preventDefault(); 
    var href = $(this).attr("href");
    var target = $(this).attr("target");
    var text = $(this).find('.nosto-product-name').text();      
    alert(text); 
    setTimeout(function() { 
        window.open(href,(!target?"_self":target));
    },300);
});

Answer 2

一个简单的解决方案就是这样这也有助于保持html语义。为每个产品锚添加一个类假设我们添加了类nosto-product-item。然后使用：

$(".nosto-product-item").click(function(){
     alert($(this).text()); 
});

使用jquery仅从一个对象中选择文本值

2 个答案: