HTML/JS/JQUERY의 목록 위로 마우스를 가져 가면 이미지 팝업

텍스트 위로 가져 가면 해당 이미지가 표시됩니다. 그러나 이것에 따르면 그것은 작동하지만 모든 이미지에 대해 동일한 id가있을 때만 첫 번째 것을 선택합니다. 이 문제를 해결하려면 아무도 알려주십시오. 이것은 나의 첫 번째 게시물입니다. Pls는 내가 틀린 일을 게시했을 때 변명했습니다. 미리 감사드립니다.HTML/JS/JQUERY의 목록 위로 마우스를 가져 가면 이미지 팝업

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Selectable - Default functionality</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 

     <script type = "text/javascript" src = "js/jquery.js"></script> 
     <script type = "text/javascript" src = "js/jquery_ui.js"></script> 

     <link rel="stylesheet" href="/resources/demos/style.css"> 

     <style> 
      #feedback { font-size: 1.4em; } 
      #selectable .ui-selecting { background: #FECA40; } 
      #selectable .ui-selected { background: #F39814; color: white; } 
      #selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; } 
      #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 

      img 
      { 
       position:absolute; 
       left:250px; 
       display:none; 
      } 
     </style> 

     <script>   
      $(function() { 
       $("#selectable").selectable(); 
      }); 
     </script> 
    </head> 

    <body> 

     <table id="myTable"> 
      <td> 
       <tr> 
        <ol id="selectable" onmouseover="show(next,true)" onmouseout="show(next,false)"> 
         <li>Item 1 <img src="next.jpg" id="next"></li> 
         <li>Item 2 <img src="next.jpg" id="next"></li> 
         <li>Item 3 <img src="next.jpg" id="next"></li> 
         <li>Item 4 <img src="next.jpg" id="next"></li> 
         <li>Item 5 <img src="next.jpg" id="next"></li> 
        </ol> 
       </tr> 
      </td> 
     </table> 

     <script type = "text/javascript"> 
      $(document).ready(function() { 
       $('#selectable').fadeIn('very slow'); 
      }); 
     </script> 

     <script language="javascript"> 
     //function to display the immage 
      function show(id,disp) { 
       if (disp == true) { 
        id.style.display = "block"; 
       } 

       if (disp == false) { 
        id.style.display = "none"; 
       } 
      } 
     </script> 
    </body> 
</html>

출처

2014-07-21 Vithushan

다른 ID 사용자는 아이디의이 같은 이름 한 기운. 수업을 이용하십시오. ID와 클래스의 차이점은 하나의 요소를 식별하는 데 ID를 사용할 수있는 반면 클래스는 둘 이상의 요소를 식별하는 데 사용할 수 있다는 것입니다. [여기에 대해 읽으십시오] (http://www.htmldog.com/guides/css/intermediate/classid /) – Ruddy

사용, 확인

<li>Item 1 <img src="next.jpg" id="next1" ></li> 
<li>Item 2 <img src="next.jpg" id="next2" ></li> 
<li>Item 3 <img src="next.jpg" id="next3" ></li> 
<li>Item 4 <img src="next.jpg" id="next4" ></li> 
<li>Item 5 <img src="next.jpg" id="next5" ></li>

출처

2014-07-21 10:41:18

답장을 보내 주셔서 감사합니다. 그러나 나는 벌써 그것을 생각했다. 그리고 나는 그것을 통과시키는 법을 didnt한다. – Vithushan

@Vithushan, 와트, 이드를 어떻게 넘길 줄 몰랐어? –

@Vithushan, 동적 ID가 인 태그를 생성 할 수 없습니까? U는 모든 클래스, img 태그에 적용 가능한 클래스 IT를 사용하는 경우에만이 접근 방식을 구현해야합니다. –

요소의 ID는 같을 수 없습니다. 대신 동일한 클래스를 사용하고 show 함수에서 클래스 이름을 전달할 수 있습니다.

업데이트 : 해당 요소를 가져 오기 위해 ol 대신 개별 lis에 mouseover 및 mouseout 이벤트가 있습니다.

<ol id="selectable"> 
    <li>Item 1 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li> 
    <li>Item 2 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li> 
    <li>Item 3 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li> 
    <li>Item 4 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li> 
    <li>Item 5 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li> 
</ol>

쇼 기능 : 유 처리를 위해 ID를 사용하는 것처럼 다음

function show(clickedObj,disp) { 
    if (disp == true) { 
     clickedObj.style.display = "block"; 
    } 

    if (disp == false) { 
     clickedObj.style.display = "none"; 
    } 
}

출처

2014-07-21 10:39:58 V31

답장을 보내 주셔서 감사합니다. 그러나 그것은 작동하지 않았다. 나는 이름이 같기 때문에 우리가 클래스를 통과한다고 생각한다고 가정합니다. 첫 번째 요소가 필요합니다. 너는 어떤 선생님이라도 있니? – Vithushan

님이 @Vithushan – V31

님의 답변을 Image 인스턴스에서 선언 된 이미지 위에 마우스를 올려 놓았을 때를 가정합니다. 답장을 보내 주셔서 다시 감사합니다. – Vithushan

HTML/JS/JQUERY의 목록 위로 마우스를 가져 가면 이미지 팝업

답변

관련 문제