Question

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

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

所有我告诉代码如果“this”hover的id为DefaultTab，那么请使用defaultTabs image 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属性中包含src的图片（请参阅Attribute Contains Selector）并更改值。例如。（仅包括相关代码）：

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 2

当你悬停时，下面将用_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"));
});

如果你想让有人徘徊的最后一个项目保持“开启”而不是默认为“开启”，那么你可以改用它：

$('.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 3

您无法使用.src您需要使用.attr('src',new_href)

Answer 4

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

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

使用jquery更改悬停的src

4 个答案: