2012-01-23 8 views
0

これは基本的にページを更新しないメニューです。一度に1つの画像のみをアクティブにしようとしていますが、以前に選択したメニューオプションを選択解除する際に問題が発生しています。つまり、これはラジオボックスではなくチェックボックスとして機能しています。ここでjQueryを使用して現在のクリック以外のすべてのクラスのsrcを変更します

$(function(){ 
    $(".img-swap").live('click', function() { 
     if ($(this).attr("class") == "img-swap") { 
      this.src = this.src.replace("_off","_on"); 
     } else { 
      this.src = this.src.replace("_on","_off"); 
     } 
    }); 
}); 

はjQueryの

<div id="feedback-topic.buttons"> 
    <a href="#bug"><img src="lib/feedback-bug_off.jpg" alt="bug" width="75" height="49" border="0" class="img-swap" /></a> 
    <a href="#content"><img src="lib/feedback-site_content_off.jpg" alt="bug" width="121" height="49" border="0" class="img-swap" /></a> 
    <a href="#suggestion"><img src="lib/feedback-suggestion_off.jpg" alt="bug" width="117" height="49" border="0" class="img-swap" /></a> 
</div> 

を変更しようとしているコードですが、私は除くすべてのボタンの上に(src.replaceを変更)選択を解除する方法を私の人生のために把握することはできませんクリックされたばかりのオプション。

また、このすべてのフォームが入っている場合に、どのオプションが次のページに選択されたのか、どのような考え方が提出されていますか?私は、選択されたものに基づいて変化する目に見えないフォームを持つべきか、これを達成するためのより簡単な手段があると思いますか?

答えて

1

フォームの送信について自分のものにもかかわらず、this以外のすべてを切り替える方法は.not(this)、または$(this).siblings()を使用することです一致する要素の属性を変更する場合は、.attr()を使用してください。 http://jsfiddle.net/alnitak/6a28q

+0

あなたはそれを持っています、ありがとうございました。 – Eric

0

最初にONをOFFにしてから、$(this).addClass( "_ on")を使用すると動作すると思います。

更新 高速読み込み、画像の切り替えは見えませんでした。

イメージsrcをCSSに入れます。 .onと.offクラスの場合、ソースを切り替えることはありません。

this.src = this.src.replace('_off', '_on'); 

$('.img-swap').not(this).attr('src', function(index, attr) { 
    return attr.replace('_on', '_off'); 
}); 

これはcallback versionを使用しています:整合素子の全てが実際にthisの兄弟である場合

+0

$(この)で

の作業のデモはcliskイベントでOBJからとなります。 –