使用jquery更改hover的src

Question

我需要关闭默认悬停状态。我有以下代码。

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

我只是告诉代码，如果“this”悬停的 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 ，当您不悬停时，将 _on 替换为 _off 。

如果您将鼠标悬停在另一个选项卡上，请关闭默认设置；如果您没有悬停，则默认设置将打开。

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

Answer 2

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

Answer 3

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

您可以搜索该图像，该图像的 src 属性中包含 _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.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只能分配给一个元素，不能分配给多个元素。

Answer 4

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

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