Изменить SRC при наведении, используя JQuery

Question

Мне нужно отключить состояние наведения по умолчанию. У меня есть следующий код.

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

Все, что я говорю коду, если "этот" указатель имеет идентификатор DefaultTab, затем возьмите изображение src defaultTabs и замените его.

Это отбрасывает меня назад ошибки.

Пожалуйста, помогите.

Спасибо

---

Я публикую всю свою функцию на проверку. Что происходит, так это то, что «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

вы не можете использовать .src вам нужно использовать .attr('src',new_href)

Answer 2

Нижеследующее заменит _off на _on, когда вы зависаете, и заменит _on на _off, когда вы не зависаете.

Отключите default, если вы наводите курсор на другую вкладку, если вы не зависаете, тогда defaultбудет включен.

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

Обновление: Теперь, когда я полностью понял проблему, вот мое предложение:

Вы можете искать изображение, которое содержит _on в своем атрибуте src (см.атрибут содержит селектор ) и измените значение.Например (только соответствующий код):

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);
});

Тогда вам даже не нужно помечать изображение по умолчанию идентификатором.

---

Я не совсем уверен, что вы имеете в видус взять defaultTabs image .Если 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");
    });
}

Обратите внимание, что один и тот же идентификатор может быть назначен только одному элементу, а не нескольким.

Answer 4

Мне трудно понять вашу логику, но, возможно, что-то вроде:

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