0

我在运行此脚本时遇到问题。它很接近，但每当我向按钮对象添加任何内容时，它都会抛出一个未定义的错误。

这是HTML：

<div class="centerBoxContentsFeatured centeredContent back ie_margin" style="width:33%;"><div class="product-col">
                <div class="tie">
                    <div class="indent2">
                        <div>
                            <a class="name" href="http://localhost:8080/rfs700/index.php?main_page=product_info&amp;cPath=37&amp;products_id=128">TB-0070 Tabletop Interpreter Booth</a>
                        </div>
                        <div class="img">
                            <a href="http://localhost:8080/rfs700/index.php?main_page=product_info&amp;cPath=37&amp;products_id=128"><img src="images/products/tb0070.jpg" alt="TB-0070 Tabletop Interpreter Booth" title=" TB-0070 Tabletop Interpreter Booth " width="130" height="130"></a>
                        </div>
                        <div class="desc">
                            The TB-0070 Tabletop Interpreter Booth accommodate...
                        </div>
                        <div class="price"><strong><img src="includes/templates/template_default/images/call_for_prices.jpg" alt="Call for Price" title=" Call for Price " width="78" height="20"></strong></div>
                        <div class="buttons">
                            <a href="http://localhost:8080/rfs700/index.php?main_page=products_new&amp;action=buy_now&amp;products_id=128"><img src="includes/templates/theme324/buttons/english/button_in_cart.gif" alt="Add to Cart" title=" Add to Cart " width="106" height="27"></a><a href="http://localhost:8080/rfs700/index.php?main_page=product_info&amp;cPath=37&amp;products_id=128"><img src="includes/templates/theme324/buttons/english/button_goto_prod_details.gif" alt="Go To This Product's Detailed Information" title=" Go To This Product's Detailed Information " width="58" height="27"></a>
                        </div>
                    </div>
                </div>
            </div></div>

这是我的javascript代码：

<script type="text/javascript">
    $(document).ready(function () {
        var doc = $(".centerBoxContentsFeatured .price");
        doc.each(function (){
            var image = $(this).find("img").attr("alt");
            var button = $(this).find(".buttons");
            if (image == "Call for Price"){
                alert(button.find("a:first-child").attr("href"));
            }
        });
    });
</script>

当我只做 alert(button) 时，它会将其显示为一个对象。但是，如果我向按钮对象添加任何其他内容，例如上面 javascript 代码中显示的内容，它会显示未定义。有任何想法吗？

4

4 回答 4

1

$(".centerBoxContentsFeatured .price")不包含.buttons。您需要遍历上一级才能取回文档。

<script type="text/javascript">
    $(document).ready(function () {
        var doc = $(".centerBoxContentsFeatured .price");
        doc.each(function (){
            var image = $(this).find("img").attr("alt");
            var button = $(this).parent().find(".buttons");
            if (image == "Call for Price"){
                alert(button.find("a:first-child").attr("href"));
            }
        });
    });
</script>
于 2013-10-07T20:01:38.747 回答
1

调用button事件时出现问题，因为它在您之外$(".centerBoxContentsFeatured .price")

而且，当您调用这样的东西时，请始终确保您调用的事件在该元素内，因为它现在不在您的 div 之外，因此会显示错误。

现在，要删除它，您需要通过它所在的确切元素直接调用按钮或引用按钮。

您的解决方案是：

<script type="text/javascript">
    $(document).ready(function () {
        var doc = $(".centerBoxContentsFeatured .price");
        doc.each(function (){
            var image = $(this).find("img").attr("alt");
            var button = $(this).parent(".tie").find(".buttons");
            if (image == "Call for Price"){
                alert(button.find("a:first-child").attr("href"));
            }
        });
    });
</script>
于 2013-10-07T20:08:47.593 回答
0

var doc = $(".centerBoxContentsFeatured .price");返回下面的 html 元素

<div class="price">
  <strong>
    <img src="includes/templates/template_default/images/call_for_prices.jpg" alt="Call for Price" title=" Call for Price " width="78" height="20">
  </strong>
</div>

这里没有按钮，因此 当您对按钮进行进一步操作时会$(this).find(".buttons")产生空对象，这将返回，因此当您尝试访问它时会出现异常。
button.find("a:first-child")nullattr

于 2013-10-07T20:08:16.243 回答
0

.buttonsclass 不是 children 的.centerBoxContentsFeatured .price是兄弟姐妹。使用siblings方法：

描述：获取匹配元素集中每个元素的兄弟姐妹，可选地由选择器过滤。

代码：

$(document).ready(function () {
    var doc = $(".centerBoxContentsFeatured .price");
    doc.each(function () {
        var image = $(this).find("img").attr("alt");
        var button = $(this).siblings(".buttons");
        if (image == "Call for Price") {
            alert(button.find("a:first-child").attr("href"));
        }
    });
});

演示：http: //jsfiddle.net/IrvinDominin/d5UTW/

于 2013-10-07T20:09:31.117 回答