0

できるだけ詳しく説明しようと思います。マウスがホバー上にあるときに img タグの src を変更したいだけです。htmlは

<ul id="nav-tabs" data-tabs="tabs">
  <li id="test" style="list-style: none;" class="active">
   <a href="#home" data-toggle="tabs" ><img src="assets/img/button_home_selected3.png" id="test2"  width="83"/><span  s>Home</span></a>
  </li>
</ul>

li タグは、スクリプトを使用して動的に追加されます

$('.plus').click(function(e) {
 e.preventDefault();
 var li_count = $('#nav-tabs').length;
 if (li_count <= 3){
  if(counter <= 3){
   $('#nav-tabs').append('<li id="test" ><a href="#tab' + counter + '" data-toggle="tabs" ><img src="assets/img/button_home_plain1.png" width="83" id="test2">Tab' + counter + '</span><button type="button" class="close">&times;</button></a></li>');
} else { alert("Only 3 Tabs Allowed!")};
}

また、スクリプトを使用してタブを切り替えるアクティブなタグが 1 つあります。

$('li#test').each(function() {
if($(this).hasClass('active'))
 {//Active class is applied
  $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
 }
 else
 {
  $(this).children().children().attr("src", "assets/img/button_home_plain.png");
 }

});

私は何かを試しましたが、うまくいきません。どこかに置き忘れているのかもしれません。

$('#test2').hover(function(e) {
  e.preventDefault();
  if ($(this).attr('src') == 'assets/img/button_home_plain1.png')
  {
   $(this).attr('src','assets/img/button_home_mouseOver1.png');
  }
});
4

1 に答える 1

0

.data()元の URL を追跡し、.on()(jQuery >= 1.7) を使用して、イベントのコールバックを登録することができます。

$("#nav-tabs").on("mouseover", "#test2", function(){
    $(this).data("originalSrc", $(this).attr("src"));
    $(this).attr("src", "assets/img/button_home_mouseOver1.png");
});

$("#nav-tabs").on("mouseout", "#test2", function(){
    $(this).attr("src", $(this).data("originalSrc"));
});

http://api.jquery.com/on/

于 2013-02-12T12:10:36.367 に答える