调用图像的数据属性

Calling the Data-Attribute of a Image

本文关键字：数据属性 图像 调用      更新时间：2023-09-26

我有一个div中的图像列表，我正试图通过它们的数据属性调用这些图像。我想做的是找出img标记是否有一个名为"数据源"的数据属性，现在调用一个警报。否则运行我的其余代码。

HTML:

        <div class="product_selection">
            <div class="product_details">
                <img data-source="Companies" src="/images/img_01.jpg">
            </div>
            <div class="product_details">
                <img data-source="Companies" src="/images/img_02.jpg">
            </div>
            <div class="product_details">
                <img data-source="Companies" src="/images/img_03.jpg">
            </div>
            <div class="product_details">
                <img  src="/images/img_04.jpg">
            </div>
        </div>

脚本：

            $('.product_details img').click(function() {
        var mainImg = $('.main_img_switch img');
        var test = $(this).attr('data-source');
        if (test.length > 0) {
            alert("check");
        } else {
            var tempSrc = mainImg.attr("src");
            mainImg.attr("src", this.src);
            this.src = tempSrc;
        }
    });

您只需要将if语句更正为：

if (test && test.length > 0)

查看控制台日志（f12），它会显示代码中的错误。您的test变量设置为undefined，因为没有数据源属性。因此，test.length与尝试访问undefined.length相同，这是一个错误。您可以通过首先检查测试是否存在来修复它，因此test && test.length。

在这种情况下，test将始终是undefined或字符串，因此if (test)是它存在的充分检查，但技术上更正确的检查是：

if (typeof test === 'string' && test.length)
相关文章：