Dynamic mouseenter

Question

Я добавил несколько div с внутренними тегами img. Каждый тег имеет собственный уникальный id = «theImg» + i, где «i» - это число. Я хочу навести курсор мыши на определенный img и показать содержимое диапазона (у которого также есть определенный идентификатор с номером). Вот мой код до сих пор, но не работает.

var j; 
document.onmouseover = function(r) { 
    console.log(r.target.id); 
    j = r.target.id; 
} 

$(document).on({ 
    mouseover: function(e){ 
    $("span").show(); 
    }, 
    mouseleave: function(e){ 
    $("span").hide(); 
    } 
}, "img#"+j); 

Answer 1

Если у вас есть промежуток после каждого img, может быть, неплохо вообще не использовать JavaScript? ;-)

В CSS можно использовать псевдослот :hover, что делает вашу работу всегда надежной.

Рассмотрим следующий пример:

img + span { 
 
    display: none; 
 
} 
 
img:hover + span { 
 
    display: block; 
 
} 
 

 
/*/ Optional styles /*/ 
 
div { 
 
    position: relative; 
 
    float: left; 
 
} 
 
div img + span { 
 
    position: absolute; 
 
    color: #fff; 
 
    background: #27ae60; 
 
    border: solid 1px #2ecc71; 
 
    border-radius: 50px; 
 
    z-index: 1; 
 
    bottom: 1em; 
 
    width: 80%; 
 
    left: 50%; 
 
    margin-left: -43%; 
 
    padding: 2% 3%; 
 
    text-align: center; 
 
}

<div> 
 
    <img src="https://placehold.it/400x200"> 
 
    <span>This is an image of a gray rectangle!</span> 
 
</div> 
 

 
<div> 
 
    <img src="https://placehold.it/200x200"> 
 
    <span>This is an image of a gray square!</span> 
 
</div> 
 

 
<div> 
 
    <img src="https://placekitten.com/g/400/200"> 
 
    <span>This is an image of a cute kitten inside a rectangle!</span> 
 
</div> 
 

 
<div> 
 
    <img src="https://placekitten.com/g/200/200"> 
 
    <span>This is an image of even cuter kitten inside a square!</span> 
 
</div>

Answer 2

Так что вопрос в том, что вы пытаетесь установить свой обработчик на динамический селектор («IMG #» + J), но это не будет работать. Во-первых, это уравнение будет оцениваться только один раз, при загрузке страницы, когда j не определено.

Так что вы хотите сделать это вместо того, чтобы:

1. цель только IMG тегов для мыши над ... А еще лучше, чтобы вашими специальными изображениями все тот же класс CSS, так что вы можете прикрепить обработчик событий только те. Это будет более эффективно.

2. Когда изображение вымывается над или из него, возьмите его атрибут id, извлеките из него номер, а затем используйте его для создания селектора для соответствующего диапазона для отображения.

   var get_span_from_image = function (изображение) { var image_id = image.attr ("id"); var matches = image_id.match (/ theImg (\ d +) /); if (matches) return $ ("theSpan" + matches [1]); return $(); // ничего не найдено, верните пустой выбор jQuery }; . $ ("IMG") парение ( функции() {// мыши над get_span_from_image ($ (это)) шоу();. }, функции() {// разнюхивать get_span_from_image ($ (это)). hide(); } );

Примечание: Есть более эффективные способы «связывать» два узла вместе, но это только, чтобы ответить на ваш вопрос с текущей структурой у вас есть.

UPDATE: Некоторые идеи связать два узла вместе

Таким образом, вместо того, чтобы пытаться извлечь число из атрибута ид, лучше всего было бы сказать, ни один из изображения или пядь о его родной брат , Вы можете выводить свой HTML, как это, например:

<img id="theImg1" data-target="theSpan1" class="hoverable" src="..."/> 
.... 
<span id="theSpan1">...</span> 

Конечно теперь ваши идеи могут быть все что угодно - вы не должны использовать пронумерованные значения или что-нибудь.

Тогда ваш код парения становится довольно просто:

var get_span_from_image = function(image) { 
    var span_id = image.data("target"); 
    return $("#" + span_id); 
}; 
$("img").hover(
    function() { // mouse over 
     get_span_from_image($(this)).show(); 
    }, 
    function() { // mouse out 
     get_span_from_image($(this)).hide(); 
    } 
); 

Надеется, что это помогает!