Помощь при неправильной работе attr, mouseenter и mouseout - PullRequest
Новая
       13

Помощь при неправильной работе attr, mouseenter и mouseout

2 голосов
/ 12 мая 2011

Я не могу заставить функцию attr изменить класс и сохранить его до следующего щелчка.Он также не будет использовать новые функции mouseenter и mouseout.Есть идеи, что я делаю не так?

HTML 

<a href="" id="play" class="pause"><div id="playctrl"><img id="pausectrl" class="play" src="images/play1.png" ></div></a>

JQUERY 

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });

    return false;
});

$('.play').mouseenter(function(){
    $(this).attr('src','images/play2.png');
}).mouseout(function(){
    $(this).attr('src','images/play1.png');
});

$('.paused').mouseenter(function(){
    $(this).attr('src','images/pause2.png');
}).mouseout(function(){
    $(this).attr('src','images/pause1.png');
});

Вот ссылка на образец страницы. Пример управления слайд-шоу MMA

Ответы [ 4 ]

4 голосов
/ 12 мая 2011

Вы устанавливаете src по ссылке.Вы хотите сделать это вместо: 

$(this).find('img').attr('src', 'myimage.png');
2 голосов
/ 12 мая 2011

Когда вы говорите:

Он также не будет использовать новые функции mouseenter и mouseout

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

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });
  return false;
});

$('.play').live("mouseenter", function() {
  $(this).attr('src','images/play2.png');
});

$('.play').live("mouseout", function(){
  $(this).attr('src','images/play1.png');
});

$('.paused').live("mousenter", function() {
  $(this).attr('src','images/pause2.png');
});


$('.paused').live("mouseout", function(){
  $(this).attr('src','images/pause1.png');
});
1 голос
/ 12 мая 2011

Для второй части: 

$('.paused').mouseenter(function(){
  $(this).attr('src','images/pause2.png');
  }).mouseout(function(){
  $(this).attr('src','images/pause1.png');
});

Было бы лучше установить имя класса с помощью jQuery и использовать CSS и спрайты изображений для замены изображений.

Что-то вроде: 

.paused {background: url(/images/paused.png) 0 0 no-repeat;}
.paused:hover {background-position: 0 15px;} /* Or whatever the position in the sprite */
1 голос
/ 12 мая 2011

Вы устанавливаете src на неверный тег, вместо этого используйте следующий код:

$("img.play", $(this)).attr('src', 'thenewimage.png');

Часть '$ (this)' - это начальная позиция, в которой jQuery пытается найти изображение с классом 'play'. Это, на мой взгляд, эффективное решение ..

полный код JS: 

$('.play').mouseenter(function(){
  $("img.play", $(this)).attr('src','images/play2.png');
  }).mouseout(function(){
  $("img.play", $(this)).attr('src','images/play1.png');
  });

HTML остается прежним .. 

$('.paused').mouseenter(function(){
  $("img.play", $(this)).attr('src','images/pause2.png');
  }).mouseout(function(){
  $("img.play", $(this)).attr('src','images/pause1.png');
  });

`

...