프런트 엔드에서 이미지 경로와 제목을 연결합니다.

일치하는 학년을 마이스 때 이미지와 제목을 표시하고 싶습니다.프런트 엔드에서 이미지 경로와 제목을 연결합니다.

도움을 받아, 수업 연도를 기준으로 이미지를 표시 할 수 있었지만 지금은 아래에 제목이 필요합니다. PHP와 데이터베이스를 사용하면 데이터베이스 필드에서 가져 오기를 쉽게 수행 할 수 있지만 여기서는 자바 스크립트 만 사용하고 있습니다.

<html> 
<head> 
    <script src="jquery.js"></script> 

    <script type="text/javascript">  
     var classes = { 
      2011: [ 
       "/name1.jpg", "name 1", 
       "/name2.jpg", "name 2"], 
      2012: [ 
       "/name3.jpg", "name 3", 
       "/name4.jpg", "name 4"], 
      2013: [ 
       "/name5.jpg", "name 5", 
       "/name6.jpg", "name 6"] 
      }; 

     jQuery(document).ready(function($){ 

      $('li').on('mouseover', function(e){ 
      $('#overlay').empty(); 
      var title = $('<h2>'); 
      title.text('Class of ' + e.target.id); 
      $('#overlay').append(title); 
      $(classes[e.target.id]).each(function(idx, entry){ 
       var img = $('<img/>'); 
       img.attr('src', entry); 
       $('#overlay').append(img); 
      });   
      });   
     }); 

    </script> 

</head> 
<body>    
    <ul id="classes"> 
     <br> 
     <li id="2011">Class of 2011</li> 
     <li id="2012">Class of 2012</li> 
     <li id="2013">Class of 2013</li> 
    </ul> 

    <div id="overlay"></div> 
</body> 
</html>

출처

2013-07-23 Growler

난 당신이 이미 jQuery를 사용을 참조하십시오. 제목을 표시하려면 ['tooltip()'] (http://jqueryui.com/tooltip/#custom-content) 메소드를 살펴 보는 것이 좋습니다! ||||||| 이미지의'src' 속성을 설정하고, 또한'title' 속성을 설정 한 다음, 이미지를 추가하고 나면, 다음과 같이하십시오 :'$ .each ($ ('# overlay img'). tooltip(); ' –

귀하의 배열이 이상한 구조입니다 :

나는 이런 식으로 뭔가를 달성하기 위해 노력하고있어. 당신은 현재의 구조로

var classes = { 
    2011: [ 
     {src:"/name1.jpg", title:"name 1"}, 
     {src:"/name2.jpg", title:"name 2"} 
    ], 
    2012: … 
}

처럼 뭔가를 변경해야 할 수 루프는이 있어야한다 :

var arr = classes[e.target.id]; 
for (var i=0; i<arr.length; i+=2) 
    $('#overlay').append(
     $('<img/>', {'src': arr[i], 'alt': arr[i+1]}), 
     $('<p/>', {'text': arr[i+1]}) // or something 
    );

출처

2013-07-23 21:19:55 Bergi

프런트 엔드에서 이미지 경로와 제목을 연결합니다.

답변

관련 문제