jqueryを使用してホバーのsrcを変更してください

Question

デフォルトのホバー状態をオフにする必要があります。私は次のコードを持っています。

$(this).attr("id"); 
if ((this.id == "defaultTab")){ 
$(img#defaultTab)[0].src.replace("_on","_off"); 
}, 

「この」ホバーのIDがDefaultTabである場合は、コードを伝えてからdefaultTabsイメージsrcを取り出して置き換えます。

これは私に間違いを投げかけています。

助けてください。

おかげ

---

私はレビューのために私の全体の機能を掲示しています。起こっているのは、 "defaultTab"がsrcを取得するためのオブジェクトとして存在しないようです。

// ************** TABs ********************// 

jQuery.preloadImages = function() 
{ 
for(var i = 0; i<arguments.length; i++) 
    { 
     jQuery("<img>").attr("src", arguments[i]); 
    } 
} 

// preload images first (can run before page is fully loaded) 
$.preloadImages("images/tabs01_off.jpg", "images/tabs01_on.jpg", "images/tabs02_off.jpg","images/tabs02_on.jpg","images/tabs03_off.jpg","images/tabs03_on.jpg","images/tabs04_off.jpg","images/tabs04_on.jpg","images/tabs05_off.jpg","images/tabs05_on.jpg","images/tabs06_off.jpg","images/tabs06_on.jpg","images/tabs07_off.jpg","images/tabs07_on.jpg","images/17.jpg","images/22.jpg","images/24.jpg","images/28.jpg","images/30.jpg","images/31.jpg","images/38.jpg"); 
$(
    function() 
     { 
      // set up rollover -- this controls the hover states 
      $("img.rollover").hover(
       function() 
        { 

        var image_id=$(this).attr("data-image"); // created a variable, making this an Jquery wrapped object. 
        this.src = this.src.replace("_off","_on"); 
        $('#changeImg').css("background-image", "url(images/"+ image_id +'.jpg)'); 
        $("#default_img").hide(); 


        $(this).attr("id"); 
        if (!(this.id == "defaultTab")){ 
         document.getElementById("defaultTab"); 
         console.log(); 
        $(this.id)[0].src.replace("_on","_off"); 
         console.log('img.defaultTab'); 
        } 

       }, 
      function() 
       { 
        this.src = this.src.replace("_on","_off"); 
       } 
     ); 
    } 

）

私のHTML片は次のとおりです。

<tr> 
<td>&nbsp;</td> 
<td width="629"><img src="images/tabs01_on.jpg" class="rollover" data-image="28" width="89" height="55" id="defaultTab" /><img src="images/tabs02_off.jpg" class="rollover" data-image="24" width="91" height="55" /><img src="images/tabs03_off.jpg" class="rollover" data-image="30" width="90" height="55" /><img src="images/tabs04_off.jpg" class="rollover" data-image="22" width="89" height="55" /><img src="images/tabs05_off.jpg" class="rollover" data-image="17" width="91" height="55" /><img src="images/tabs06_off.jpg" class="rollover" data-image="38" width="90" height="55" /><img src="images/tabs07_off.jpg" class="rollover" data-image="31" width="90" height="55" /></td> 
</tr> 

Answer 1

は、あなたがホバリングしているとき_onで_off交換し、あなたがホバリングしていないとき_offで_onに置き換えられます。

他のタブにカーソルを置いた場合は、デフォルトをオフにします。ホバーインしていない場合は、デフォルトがオンになります。

$('.rollover').not('#defaultTab').hover(function(){ 
    $(this).attr('src',$(this).attr('src').replace("_off","_on")); 
    $('#defaultTab').attr('src',$('#defaultTab').attr('src').replace("_on","_off")); 
},function(){ 
    $(this).attr('src',$(this).attr('src').replace("_on","_off")); 
    $('#defaultTab').attr('src',$('#defaultTab').attr('src').replace("_off","_on")); 
}); 

誰かが代わりにデフォルトの「on」でされている「on」に滞在するに推移し、最後の項目をしたい場合は、あなたの代わりにこれを使用することができます：

$('.rollover').hover(function(){ 
    var hovered = $(this); // save the element we hovered on to use below. 
    $('.rollover').each(function(){ 
     var tab = $(this); // $(this) in here is each tab as we go through all of them, not the one we hovered on 
     tab.attr('src',tab.attr('src').replace("_on","_off")); // Turn off ALL tabs. 
    } 
    hovered.attr('src',hovered.attr('src').replace("_off","_on")); // Turn on the tab we hovered on 
},function(){ return false; }); 

Answer 2

更新：今、私は問題を完全に理解することを、ここに私の提案です：

あなたはを検索することができます画像は、src属性（Attribute Contains Selectorを参照）には、_on、値を設定します。例えば。 （関連コードのみを含む）：

function toggle(element, on) { 
    var from = on ? '_off' : '_on', 
     to = on ? '_on' : '_off'; 

    element.attr('src', function(i, src) { 
     return src.replace(from, to); 
    }); 
} 


$("img.rollover").hover(function(){ 
    toggle($('img.rollover[src*="_on"]'), false); 
    toggle($(this), true); 
}, function() { 
    toggle($(this), false); 
}); 

次に、デフォルトの画像にIDを付ける必要はありません。私はあなたがで何を意味するかはかなりわからない

---

はdefaultTabsイメージを取ります。 thisは画像を参照している場合、あなたは簡単なことが可能です。同じことを

if (this.id == "defaultTab"){ 
    $(this).find('img').attr(src, function(i, value) { 
     return value.replace("_on","_off"); 
    }); 
} 

注：

if (this.id === "defaultTab"){ 
    this.src = this.src.replace("_on","_off"); 
} 

を一方、画像がthisの子孫である場合は、findを使用する必要がありますIDは1つの要素にのみ割り当てることができ、複数の要素に割り当てることはできません。

Answer 3

私はあなたのロジックを理解するのに苦労を持っていますが、おそらくのようなもの：以下

$(this).mouseenter(function() { 
    if (this.id != 'defaultTab') { 
     return; 
    } 
    this.src = this.src.replace(/_on/g,'_off'); 
}); 

Answer 4

あなたが必要.src使用カント使用する.attr('src',new_href)