使用jquery更改悬停的src

我需要关闭默认的悬停状态。我有以下代码。使用jquery更改悬停的src

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

所有我告诉代码，如果“this”悬停有一个DefaultTab的id，然后采取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>

来源

2011-10-21 latoyale

和那是什么错误... – Rafay

下面将取代_OFF与_ON当你徘徊，并与_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")); 
});

如果你想在最后一个项目一个人徘徊在“开”而不是默认的“上”留下来，那么你可以使用它代替：

$('.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; });

来源

2011-10-21 15:33:33

我从控制台收到src未定义的错误。 – latoyale

src应该在引号中（字符串文字） – jbabey

对不起，错字！现在纠正它。 –

更新：现在，我完全理解这个问题，这里是我的建议：

您可以搜索图像，其中包含_on的src属性（请参阅Attribute Contains Selector）和cha价值。例如。（仅包括相关代码）：

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.src = this.src.replace("_on","_off"); 
}

如果在另一方面，该图像是this的后裔，你必须使用find：

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

注意相同ID只能分配给一个元素，而不能分配给多个元素。

来源

2011-10-21 15:30:50

这将关闭我所在的任何按钮。我已经有这个功能。我需要这个指向任何.src defaultTab来自。 – latoyale

我真的不明白它......'defaultTab'是其中一个图像。现在你发布了你的代码和HTML，看起来你是在我发布的第一个片段之后。如果元素ID是'defaultTab'，它将只会替换URL ...如果这对你没有帮助，那么你必须更好地解释你的问题。 –

好的，没问题。我有7个按钮。其中一个当您加载页面默认情况下已处于“开启”状态。现在，当我将鼠标悬停在它上面时，它会关闭。当我将鼠标悬停在其他按钮上时，它们会打开。我遇到的问题是，如果我不把鼠标悬停在默认按钮上，它不会关闭。因此，如果用户选择将鼠标悬停在另一个按钮上而不是已经打开的按钮上，则最终会突出显示两个按钮。我需要某种功能来告诉on按钮在旁边的任何其他按钮被选中时关闭。希望这更清楚。谢谢 – latoyale

我很难理解你的逻辑，但也许是这样的：

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

来源

2011-10-21 15:33:10 David

默认选项卡在页面加载时自动突出显示。我只是想让它关闭，如果有其他东西被徘徊。我已经将代码设置为关闭并基于悬停在图像状态上。 – latoyale

你不能使用.src你需要使用.attr('src',new_href)

来源

2011-10-21 15:33:53

他在DOM元素上调用.src，而不是jQuery元素，所以.src是正确的。 – jbabey

使用jquery更改悬停的src

回答

相关问题