Question

我的CMS的灯箱式照片库输出如下代码。我已经为两个缩略图提供了代码。

“m”和“s”的参数值将始终为“150”和“true”。我想将其更改为m = 250和s = false。

我是JavaScript和jQuery的新手。如果您有任何建议，请帮我解决将代码放在页面上的位置。谢谢。

<div class="thumbTight MainContent">
    <div class="thumbContents">
        <a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
            <img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&amp;m=150&amp;s=true" alt="Banana" />
        </a>
        <div class="description" style="display: none;"></div>
    </div>
</div>

<div class="thumbTight">
    <div class="thumbContents">
        <a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
            <img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&amp;m=150&amp;s=true" alt="Cantaloupe" />
        </a>
        <div class="description" style="display: none;"></div>
    </div>
</div>

Answer 1

在您的文档就绪处理程序中，使用each迭代缩略图（带有thumbContents类的div内的图像）并将src属性分配给原始src}具有所需替换的属性。

$(function() {
    $('.thumbContents img').each( function() {
        var $img = $(this);
        $img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
    });
});

Answer 2

您可以在页面加载后运行此jQuery。图像将开始使用不同的URL加载，您的代码将运行并更改图像URL，然后新的图像将加载并显示。除非你实际上使用CSS使得他们的图像最初被隐藏并且只有在你设置了所需的URL之后才可见，所以你无法做任何事情来阻止初始显示。

$(".thumbTight img").each(function() {
    this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});

您可以在此处查看演示：http://jsfiddle.net/jfriend00/UdnFE/。

使用JavaScript / jQuery替换链接中的URL参数值？

2 个答案: