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

Question

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

<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

此处“this”指的是 anchor ，$(this).text() 将包含 anchor 内所有元素的所有文本。

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

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

我也看不出使用 .each() 然后在其中注册处理程序有任何意义。另外 $(".nosto-product-list-item a") 会选择具有该类的元素内的任何 anchor 。相反，你可以使用

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