另一个未定义的JavaScript问题

Another javascript undefined issue

本文关键字：问题 JavaScript 未定义 另一个      更新时间：2023-09-26

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

这是 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>

当我只做警报（按钮）时，它将其显示为一个对象。但是，如果我向按钮对象添加任何其他内容，例如上面的 javascript 代码中显示的内容，它将显示 undefined。有什么想法吗？

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

调用事件时出现问题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>

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")操作时，这将返回null，因此当您尝试访问其中attr时，您将获得异常。

.buttons类不是.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/

相关文章：