如何使用jQuery更改特定页面上的图像?

时间:2016-04-27 18:26:34

标签: javascript jquery html

好的,所以我学会了如何删除特定页面上的元素并允许它们出现在其他页面上。我想我可以对图像应用相同的原理。

我有一个横幅图片,我想让它在多个页面上有所不同,现在不必为每个页面构建一个全新的页面包装器(我使用的是一个名为Luminate的CMS),或者学习他们自己的编程令人困惑的语言...我想我们只是使用jQuery。

所以我试图做的是:

$(document).ready(function() {
    if (window.location.href == "http://convio.cancer.ca/site/TR/Events/General?pg=informational&fr_id=21959&type=fr_informational&sid=10335") {
        //new banner 
        $('#bannerrmv').attr("src", "../images/content/pagebuilder/bikerunning.png");
    } else {
        //original banner   
        $('#bannerrmv').attr("src", "../images/content/pagebuilder/cancer_fighter_sweat_971_x_327103179.jpg")
    }
});    

但它不起作用。如果我使用.hide().show(),它确实可以隐藏我拥有的横幅。

这是横幅的html:

<div class="banner-container" id="bannerrmv">
  <img src="../images/content/pagebuilder/cancer_fighter_sweat_971_x_327103179.jpg" class="banner" width="100%" alt="Image Name" />  
</div>

我搜索过Stack,我遇到过一堆类似问题,但情况不同。

我觉得我.href不正确,但我不知道我会改变它。

如果我想为多个网址设置,我需要做的是添加||,然后添加网址吗?

任何建议都将受到超级赞赏!谢谢你的时间。

2 个答案:

答案 0 :(得分:0)

烨。定位图像:$.('#bannerrmv img').attr("src","../images/content/pagebuilder/bikerunning.png"

答案 1 :(得分:0)

您可以这样做,切换路径名值并定义要替换旧路径的相应网址:

var imageToChange = $('#img')[0];

switch(document.location.pathname){
    case '/url/first':
        imageToChange.src = 'first.jpg';
        break;
    case '/url/second':
        imageToChange.src = 'second.jpg';
        break;
    ...
}