javascript jQuery获取img src并将其作为数据属性使用

l0oc07j2  于 2023-04-04  发布在  Java
关注(0)|答案(4)|浏览(162)

我试图使用一个JavaScript库,它需要一个特定的HTML结构,但不幸的是,我不允许改变它。
结构来自一个模板,我必须使用我所拥有的。
重点是我尝试复制每个图像的src并将其作为data-largesrc=“image/source/here”放入。
任何线索,我怎么能做到这一点?我有这个直到现在,但它不工作的预期:

$(document).ready(function () {
    $("a").attr('data-largesrc', "'" + $("a").children().attr('src')) + "'");
});

HTML的结构是这样的:

<div class="container">
    <div id="products" class="productsList main">
        <ul id="og-grid" class="list og-grid">
            <li class="l1 i1 column1">
                <a href="?17,barracuda-email-security-gateway" tabindex="-1">
                    <img src="files/150/BARRACUDAESG.jpg.png" alt="BARRACUDAESG.jpg.png">
                </a>
            </li>
        </ul>
    </div>
</div>

我相信这应该很容易解决,但我似乎找不到解决办法。如果你能帮助我,非常感谢!

xzabzqsa

xzabzqsa1#

试试看

$(document).ready(function () {
  $.each($("a"), function(i, k){
    $(this).data("largesrc", $(this).find("img").attr("src"));
  });
});
70gysomp

70gysomp2#

children()方法返回父元素的所有直接子元素。换句话说,它将返回一个数组。您要查找的是单个对象。
无论如何,最好使用data()函数

function getImageSource() {
    var imgSrc = $("img").first().prop("src");
    $("img").data("largesrc", imgSrc);
    var data = $("img").data("largesrc");
    $("#img-data-value").html(data);
}

$("button").on("click", getImageSource);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div id="products" class="productsList main">
        <ul id="og-grid" class="list og-grid">
            <li class="l1 i1 column1">
                <a href="?17,barracuda-email-security-gateway" tabindex="-1">
                    <img src="files/150/BARRACUDAESG.jpg.png" alt="BARRACUDAESG.jpg.png">
                </a>
            </li>
        </ul>
    </div>
</div>

<button>Get Image Source</button>
<p id="img-data-value"></p>
hts6caw3

hts6caw33#

首先,你不需要额外的引号。其次,你应该使用.first()而不是.children(),因为.children()将返回一个数组,而.first()将返回第一个子数组(而你的只有一个子数组)。

$(document).ready(function () {
        $("a").data('largesrc', $("a").first().attr('src')));
    });
wn9m85ua

wn9m85ua4#

真实的工作脚本

let targetButton = $('.your-btn');
    if (targetButton.length) {
        targetButton.each(function (){
            let self = $(this),
                term = self.data('image');
            $(this).on('click', function () {
                let img = $(this).closest('.parent-class').find('img.target-class');
                img.attr('src', term);
                        
            });
        });
    }

相关问题