Переменная в скрипте jQuery?

0

Таким образом, у меня есть сценарий, когда вы наведите указатель на div, он загрузит файл.html в другой div. Я хочу, чтобы этот скрипт работал со многими div. Я не хочу писать отдельный сценарий для каждого изображения, вместо этого использую переменную, которая основывается на имени div. Скажем, у меня есть div с именем p3, и когда я наводил указатель мыши, я хочу, чтобы скрипт загружал p3.html. Здесь сценарий, чтобы показать вам, что я имею в виду:

<script type="text/javascript">
$(document).ready(function () {
    $('#p1').mouseenter(function () {
        $('#description').load('descr/p1.htm');
    });
    $('#p1').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

Любой совет будет оценен.

  • 0
    $ ("img") или используйте класс $ (". mouseoverclass"). mouseenter ...
Теги:
load

6 ответов

0
Лучший ответ

Я думаю, это зависит от того, как генерируются div. То, что я сделал бы, это установить атрибут на div для обозначения целевой страницы htm.

Что-то вроде

<div data-targetPage='p1.htm' class='hoverImage'>stuff</div>

Тогда jquery может выглядеть так

$(document).ready(function () {
    $('.hoverImage').mouseenter(function () {
        $('#description').load($(this).attr('data-targetPage'));
    });
    $('.hoverImage').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

Изменение: обновлено, чтобы отразить все комментарии.

Поделиться
  • 1
    Пользовательские атрибуты в порядке, если вы используете допустимые пользовательские атрибуты [data-*] . Вместо [targetPage] (который недопустим) вы должны использовать [data-target-page] , к которому вы можете получить доступ с помощью $(..).data('targetPage'); ,
  • 0
    Обновлено, чтобы отразить ваш комментарий.
Показать ещё 3 комментария
1

Вы можете добавить общий класс ко всем изображениям и сделать это следующим образом:

$document).ready(function () {
    $('.class').mouseenter(function () {
    var id = this.id;
    $('#description').load('descr/' + id + '.htm');
    });
    $('.class').mouseleave(function () {
    $('#description').load('descr/portDefault.htm');
});
Поделиться
0

Подобно тому, что сказал matweka, я бы добавил класс ко всем изображениям, которые вы хотите разрешить, и просто добавьте this.attr('id'), чтобы выбрать p1, p2 и т.д.

$(document).ready(function() {
    $('.clickImg').mouseenter(function() {
        $('#description').load('descr/' + this.attr('id') + '.htm');
    });
    $('.clickImg').mouseleave(function() {
         $('#description').load('descr/portDefault.htm');
    });
});

Кроме того, я бы рекомендовал использовать.hover() вместо mouseenter и mouseleave

например:

$(document).ready(function() {
    $('.clickImg').hover(function() {
        $('#description').load('descr/' + this.attr('id') + '.htm');
    }, function() {
         $('#description').load('descr/portDefault.htm');
    });
});
Поделиться
0

Вы хотите использовать объекты? Потому что вы говорите, что не хотите писать код снова и снова. Вот как вы могли бы сделать один (взятый из объектов создания jQuery):

    var box = {}; // my object
var boxes =  []; // my array

$('div.test').each(function (index, value) {
    color = $('p', this).attr('color');
    box = {
        _color: color // being _color a property of 'box'
    }
    boxes.push(box);
});

Надеюсь, это то, что вы ищете.

Поделиться
0

Одна хорошая вещь, которую вы можете сделать, это использовать атрибуты данных на ваших изображениях, например:

<img class="images"  src="bleh.jpg" data-imagename="image_bleh.jpg" />

и внутри вашего javascript вы делаете:

$('.images').mounseenter(function(){
   $('#description').load('desc/'+$(this).data('imagename'));
});

сообщите мне, понимаете ли вы это.

Поделиться
0

Попробуй это:

$(document).ready(function() {
    $('img').mouseenter(function() {
        $('#description').load('descr/' + this.src.replace('\.png', '') + '.htm');
    });
    $('img').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

Тем не менее, я бы рекомендовал добавить некоторый класс ко всем изображениям, к которым вы хотите обратиться, например

<img class="clickableImage" src="...">

и выберите их с помощью jQuery следующим образом:

$('.clickableImage').mouseenter(...
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню