использовать один скрипт для наведения кнопок с переменной при наведении курсора? - PullRequest
Новая
       7

использовать один скрипт для наведения кнопок с переменной при наведении курсора?

0 голосов
/ 02 сентября 2011

Я пытаюсь определить переменную для события наведения мыши.

Идея состоит в том, что позже я смогу использовать эту переменную для замены идентификаторов DIV и "swap-image" для создания общего наведения мышисценарий, который я могу использовать для набора кнопок.

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

Будет ли это работать?Я пробовал что-то вроде этого: 

//define variable on mouseover

$("#world_map_8_button").mouseover(function() {
        var location = "#world_map_8";

    }); 


//use variable within script

   //mouse over/out swap image + 

$(location + "_button").hover(function() {
    $(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg"); 
        }, function() {
            $(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg"); 
        }); 
 });

Это часть HTML-кода, чтобы помочь разобраться, все кнопки называются одинаково. 

    <div id="world_map_8_button">
            <img id="world_map_8_button_jpg" src="img/buttons/map_buttons/world_map/world_map_8_button.jpg" width="41" height="41"  alt="" />
        </div>

    <div id="world_map_9_button">
            <img id="world_map_9_button_jpg" src="img/buttons/map_buttons/world_map/world_map_9_button.jpg" width="41" height="41"  alt="" />
        </div>


    <div id="world_map_10_button">
            <img id="world_map_10_button_jpg" src="img/buttons/map_buttons/world_map/world_map_10_button.jpg" width="41" height="41"  alt="" />
        </div>

, если я объявляю переменнуюв функции HOVER это работает (но только для мыши), но это не имеет никакого смысла и не будет трудоемким ... 

$("#world_map_8_button").hover(function() {

                var location = "#world_map_8";

    $((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg"); 
        },
        function() {
            $((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg"); 
        });

Ответы [ 3 ]

3 голосов
/ 02 сентября 2011

Глядя на ваш код, я думаю, что атрибут заканчивается селектор $= поможет вам. Вам не нужно устанавливать никакие переменные, попробуйте это 

$("[id$=_button]").hover(function() {
    $("#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button_over.jpg"); 
        }, function() {
            $"#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button.jpg"); 
        }); 
 });
1 голос
/ 02 сентября 2011

Это хороший кандидат на CSS. У вас может быть одно изображение с парящими и обычными изображениями, а затем установить смещение фона при наведении курсора мыши. W3Schools хорошо объясняет технику

Однако, чтобы ответить на ваш вопрос напрямую, вы можете попробовать что-то вроде этого: 

$('[id$=_button]').hover(function() {
    $('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '_over.jpg');
}, function () {
    $('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '.jpg');
});

Вам нужно всего лишь разместить это на своей странице, чтобы позаботиться обо всем, не имея нескольких сценариев и объявлений глобальных переменных.

0 голосов
/ 02 сентября 2011

Нет, это не сработает.Используйте jQuery's .data(); метод .

...