jquery - 图像 src 不会在悬停时改变 - jQuery

Question

我有一个 <h1>谁在点击时发生变化，谁获得了新内容。新内容是两个<span>具有不同的 ID，并且每个 ID 中都有文本和 img。

如果 <span>悬停时，我想更改他的图像的 src。

实际上，我的代码只有在我设置 $('h1').hover(function() {}; 时才有效在我的例子中应该是两个函数，否则它会改变两个图像的 src。

我试过了 $('#SpanId').hover(function() {};但没有成功。

这是我的简化代码:

HTML

<h1>Hello World</h1>
<button>Change title</button>

jQuery

// On click, change title
$('button').click(function() {
  $('h1').html('');
  $('h1').append('<span id="info">Information <img alt="Info icon" src="http://www.iconsdb.com/icons/preview/orange/info-xxl.png"></span>');
});

// Change info icon on hover
$('#info').hover(function() {
  $('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/gray/info-2-xxl.png');
}, function() {
  $('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/orange/info-xxl.png');
});

密码本 https://codepen.io/Qasph/pen/vmLwWJ

提前致谢，祝您有愉快的一天!

Answer 1

我们的想法是，您动态创建了一个 jQuery 尚未意识到的新元素，这使得它不会监听其上的事件。

我必须在这里为您提供的解决方案是监听整个文档 $( document ).on( 'event_name', 'searching_element', callback_function ) 以获取给定元素上的给定事件。

// On click, change title
$('button').click(
  function() {
  $('h1').html('');
  $('h1').append('<span id="info">Information <img alt="Info icon" src="http://www.iconsdb.com/icons/preview/orange/info-xxl.png"></span>');
  }
);

$( document ).on(
  'mouseover',
  '#info',
  function () {
    var $info = $ ( this );
    var $img = $info.find( 'img' );

    $img.attr(
      'src',       
      'http://www.iconsdb.com/icons/preview/orange/info-2-xxl.png'
    );
  }
);

$( document ).on(
  'mouseout',
  '#info',
  function () {
    var $info = $ ( this );
    var $img = $info.find( 'img' );

    $img.attr(
      'src',
      'http://www.iconsdb.com/icons/preview/orange/info-xxl.png'
    );
  }
);

自己尝试一下:https://codepen.io/Qasph/pen/vmLwWJ

除此之外，您只需使用 CSS 就可以达到相同的效果，这比为这种简单的东西编写 javascript 的解决方案要好得多。

$('button').click(
  function() {
  $('h1').html('');
  $('h1').append('<span id="info">Information <span class="img_icon"></span></span>');
  }
);

body {
  background-color : dodgerblue;
}

h1 .img_icon {
  width : 20px;
  height : 20px;
  display : inline-block;
  background-image : url( 'http://www.iconsdb.com/icons/preview/orange/info-xxl.png' );
  background-repeat : no-repeat;
  background-size : cover;
  background-position : 50% 50%;
}

h1:hover .img_icon {
  background-image : url( 'http://www.iconsdb.com/icons/preview/orange/info-2-xxl.png' );
}

#info:hover {
  color : white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello World</h1>
<button>Change title</button>