Imageホバーでsrcが変更されない - jQuery

Question

<h1>私はクリックで変更され、誰が新しいコンテンツを取得したのですか？新しいコンテンツはidが異なる2つの<span>で、それぞれにテキストとimgがあります。

<span>が表示されている場合は、画像のsrcを変更したいと思います。

実際には私のコードは私が$('h1').hover(function() {};を設定した場合にのみ機能しますが、私の場合は2つの機能が必要です。そうしないと、両方の画像の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'); 
}); 

Codepen https://codepen.io/Qasph/pen/vmLwWJ

ありがとうございました。素敵な日です！

Answer 1

hoverリスナーが存在しないオブジェクトに耳を傾けているので、あなたが#info後にリスナーを設定する必要がありますトリガしないように設定されている。

// On click, change title 
 
$('button').click(function() { 
 
    $('#info').unbind('hover'); // prevent duplicating hover event 
 

 
    $('h1').html(''); 
 
    $('h1').append('<span id="info">Information <img alt="Info icon" src="http://www.iconsdb.com/icons/preview/orange/info-xxl.png"></span>'); 
 
    
 
    $('#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'); 
 
    }); 
 
});

body {background-color: dodgerblue} 
 
h1 img {width:20px} 
 
#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>

Answer 2

と思うあなたは、動的のために新しい要素を作成することですそれは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>

Answer 3

の理由は、あなたがホバーバインドを作成するとき#infoであなたのスパンが存在しないということです。私は.onとのMouseEnter/mouseleaveに使用してお勧めします：

// 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>'); 
}); 

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

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

イベントリスナーを使用すると、イベントハンドラを作成するときに実際に存在するオブジェクトであるh1要素、までバブルにイベントを期待しています。

Answer 4

Change 

$('#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'); 
    }); 

To: 

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