14

フォーラムで1つの特定の問題を検索しましたが、見つけたすべての解決策が私の問題に対して機能するわけではありません。

左側に画像があります。右側では、私は別の言葉を持っています。そのため、特定の名前をクリックすると、画像が画像フォルダにある画像に変更されます。基本的に、画像のソースを変更したいです。これが私のインデックスのコードです：

<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>

そして、これが私が試した2つのjqueries式です。

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

と：

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

5 に答える 5

18

2回目の試みは正しいです。動作する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

希望する左の位置をデータ属性に格納します。

<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

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

2つ目は正常に機能しますが、相対パスの代わりに明示的なパスを使用する必要があります。

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