동적 마우스 센터

Question

몇 개의 div에 img 태그가 추가되었습니다. 모든 태그에는 고유 한 id = "theImg"+ i가 있습니다. 여기서 "i"는 숫자입니다. 특정 img에 마우스를 올려 놓고 span의 내용을 표시하고 싶습니다. 또한 숫자와 함께 특정 id를 갖습니다. 지금까지는 내 코드가 있지만 작동하지 않습니다.

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가 정의되지 않은 경우에만 한 번만 계산됩니다. 만에 이벤트 핸들러를 첨부 할 수 있도록 ... 더 나은 아직, 당신의 특별한 이미지를 모두 같은 CSS 클래스를 줄 위에 마우스

1. 대상 단지 IMG 태그 :

   그래서 대신이 작업을 수행 할 수 그. 그것은 더 효율적일 것입니다.

2. 이미지가 moused되거나 out 될 때 id 속성을 가져오고 그 숫자를 추출한 다음 해당 값을 사용하여 표시 할 해당 범위에 대한 선택기를 작성하십시오.

   var get_span_from_image = function (image) { var image_id = image.attr ("id"); var matches = image_id.match (/ theImg (\ d +) /); if (matches)가 $ ("theSpan"+는 [1]과 일치합니다)를 반환합니다. return $(); // 아무것도 찾지 못하면 빈 jQuery 선택을 리턴한다 }; . $ ("IMG") 호버 ( 기능() {// 마우스를 통해 get_span_from_image ($ (이)) 쇼();. 을}, 기능() {// 마우스 아웃 get_span_from_image ($ (이)). hide(); } );

참고 :이 "링크"두 개의 노드 함께 더 나은 방법이있다, 그러나 이것은 당신이 가지고있는 현재의 구조 귀하의 질문에 대답하는 것입니다.

UPDATE : 일부 아이디어는 id 속성에서 번호를 추출하기 위해 노력하는 두 개의 노드

을 그래서 그 대신 링크, 더 좋은 방법은 형제의에 대한 이미지 중 하나 스팬 중 하나를 이야기하는 것입니다 . 당신은 예를 들어 출력이처럼 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(); 
    } 
); 

희망!