14

我在论坛中搜索了一个特定问题，但我找到的所有解决方案都不适用于我的问题。

我在左侧有一个图像。在右边，我有不同的词。因此，当我单击特定名称时，我希望图片更改为我的图像文件夹中的任何图片。基本上，我希望图像的来源发生变化。这是我的索引的代码：

<div id="picture_here">
     <img src="images/mtkili.png" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>

这是我尝试过的两个 jquery 公式：

$('#mtl').click(function(){
    $('#picture').attr()({
        'src':'images/short.png'
    })          
})

和：

$('#mtl').click(function(){
   $('#picture').attr('src', 'images/short.png');
});
4

5 回答 5

18

你的第二次尝试是正确的。这是工作的 jsFiddle：http: //jsfiddle.net/MEHhs/

所以代码应该是：

html:

<div id="picture_here">
     <img src="http://www.sbtjapan.com/img/FaceBook_img.jpg" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>​

js：

$('#mtl').click(function(){
    $('#picture').attr('src', 'http://profile.ak.fbcdn.net/hprofile-ak-ash3/41811_170099283015889_1174445894_q.jpg');
    });

我添加了一些在谷歌上找到的现有图片。

于 2012-10-08T14:56:06.250 回答
4

jsBin 演示

  • 为所有触发器添加一个类
  • 创建名为：mtl.png和contact.png

并使用：

<div>
     <div class="button" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" id="contact">SF</div>
</div>

$('.button').click(function(){
   var idToSRC = 'images/'+ this.id +'.png';
   $('#picture').attr('src', idToSRC);
});

虽然上述内容对用户不友好，因为在加载新图像时会有一些延迟......
更好的方法是使用单个（所谓的）精灵图像，包含所有想要的图像，将其设置为 DIV 背景图像和单击时更改该DIV的“背景位置”！

使用精灵演示 2

将所需的 -left 位置存储到数据属性中：

<div id="picture"></div>
<div>
     <div class="button" data-bgpos="68" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" data-bgpos="100" id="contact">SF</div>
</div>

CSS：

#picture{
  width:25px;
  height:25px;
  background:url(/images/sprite.png) no-repeat;
}

检索该数据并移动 packgroundPosition：

$('.button').click(function(){
  var bgpos = $(this).data('bgpos');
  $('#picture').css({backgroundPosition: -bgpos+' 0'})
});
于 2012-10-08T14:54:44.237 回答
2

对于第二个版本，一切看起来都不错，确保将 DOM 调用包装在文档就绪函数中，该函数可以写成...

$(document).ready(function() {
    ...
});

或者...

$(function() {
    ...
});

所以你得到...

$(function() {
    $('#mtl').click(function(){
        $('#picture').attr('src', 'images/short.png');
    });
});
于 2012-10-08T14:56:14.357 回答
2

无需将事件侦听器添加到每个链接类，您只需将其用作任何链接上的内联函数

function changeurl(theurl){
    $('.myimage').attr('src', theurl);
}

https://jsfiddle.net/rabiee3/ftkuub3j/

于 2018-01-15T07:36:35.273 回答
1

第二个工作正常，但您必须使用显式路径而不是相对路径：

$('#mtl').click(function(){
$('#picture').attr('src', '/images/short.png');
});
于 2012-10-08T15:11:23.800 回答