Jqueryで各ツールチップのクリックでdivを開く

Question

場所マップの各部分についてツールチップを取得しようとしています。以下のコードを使用して、私は必要なだけ多くの部分のツールチップを取得しています。しかし、次のステップは、各ツールチップにリンクを付けることです。さらに詳しい情報がある別のツールチップを開く必要があります。 私のコードで何かできることを提案してください。注：divを手動で追加する必要はありません。変数を使用してツールチップを追加するだけでdivを追加する必要があります。アンカーがクリックされると、アンカーが再びdivが削除されますクリックすると

<style> 
body { 
    text-align: center; 
    font: 13px Arial,Helvetica;  
} 

/* Relative positioning*/ 
#wrapper { 
    position: relative; 
    margin: 10px auto 20px auto; 
    border: 1px solid #fafafa; 
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5); 
    box-shadow: 0 3px 3px rgba(0,0,0,.5); 
} 

/* Hide the original tooltips contents */ 
.pin { 
    display: none; 
} 

/* Begin styling the tooltips and pins */ 
.tooltip-up, .tooltip-down { 
    position: absolute; 
    background:url(mapimg.png); 
    width: 26px; 
    height: 15px; 
} 

.tooltip-down { 
    background-position: 0 -52px; 
} 

.tooltip { 
    display: none; 
    width: 180px; 
    cursor: ; 
    text-shadow: 0 1px 0 #fff; 
    position: absolute; 
    top: 12px; 
    left: 140px; 
    z-index: 999; 
    margin-left: -125px; 
    padding:15px; 
    color: #222; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7); 
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7); 
    box-shadow: 0 3px 0 rgba(0,0,0,.7); 
    background: #fff1d3; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90)); 
    background: -webkit-linear-gradient(top, #fff1d3, #ffdb90); 
    background: -moz-linear-gradient(top, #fff1d3, #ffdb90); 
    background: -ms-linear-gradient(top, #fff1d3, #ffdb90); 
    background: -o-linear-gradient(top, #fff1d3, #ffdb90); 
    background: linear-gradient(top, #fff1d3, #ffdb90);   
} 

.tooltip::after { 
    content: ''; 
    position: absolute; 
    top: -10px; 
    left: 50%;/* 
    margin-left: -90px; 
    border-bottom: 10px solid #fff1d3; 
    border-left: 10px solid transparent; 
    border-right :10px solid transparent;*/ 
} 

.tooltip-down .tooltip { 
    bottom: 12px; 
    top: auto; 
} 

.tooltip-down .tooltip::after { 
    bottom: -10px; 
    top: auto; 
    border-bottom: 0; 
    border-top: 10px solid #ffdb90; 
} 

.tooltip h2 { 
    font: bold 1.3em 'Trebuchet MS', Tahoma, Arial; 
    margin: 0 0 10px; 
} 

.tooltip ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}  

#pop1, #pop2 { 
     display:none; 
    width: 180px; 
    cursor: ; 
    text-shadow: 0 1px 0 #fff; 
    position: absolute; 
    top: 12px; 
    left: 140px; 
    z-index: 999; 
    margin-left: -125px; 
    padding:15px; 
    color: #222; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    background: #fff1d3; 
} 
</style> 

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     // set the wrapper width and height to match the img size 
     $('#wrapper').css({'width':$('#wrapper img').width(), 
          'height':$('#wrapper img').height() 
     }) 

     //tooltip direction 
     var tooltipDirection; 

     for (i=0; i<$(".pin").length; i++) 
     {    
      // set tooltip direction type - up or down    
      if ($(".pin").eq(i).hasClass('pin-down')) { 
       tooltipDirection = 'tooltip-down'; 
      } 
      else { 
       tooltipDirection = 'tooltip-up'; 
      } 

      // append the tooltip 
      $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\ 
               <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\ 
             </div>"); 
     }  

     // show/hide the tooltip 
     $('.tooltip-up, .tooltip-down').mouseenter(function(){ 
       $(this).children('.tooltip').fadeIn(100); 
      }).mouseleave(function(){ 
       $(this).children('.tooltip').fadeOut(100); 
     }) 
    }); 
</script> 

<div id="wrapper"> 
    <img width="920" height="450" src="image.jpg" alt="World continents"> 

    <div class="pin pin-down" data-xpos="280" data-ypos="110">  
     tooltip 1 <br> 
     <b>Area:</b> 24 sft<br> 
     <b>block:</b> 2 <a href="#">Click here for more info(need to give link here for new pop div..for all other tooltips)</a> 
    </div> 

    <div class="pin" data-xpos="280" data-ypos="135">  
     <b>Area 2</b><br/>  
    Area: 17 sft<br/> 
     Population: 382,000,000 
    </div> 

    <div class="pin pin-down" data-xpos="280" data-ypos="158">  
    <b>Area 3</b><br/> 
     Area: 10<br/> 
     <b>Population:</b> 731,000,000 <a href="#">Click here for more info(need to give link here for new pop div..for all other tooltips)</a> 
    </div> 

    <div class="pin" data-xpos="280" data-ypos="180">  
     <strong>Area 4</strong><br/>  
    Area: 30<br/> 
     Population: 1,022,011,000 <a href="#">Click here for more info(need to give link here for new pop div..for all other tooltips)</a> 
    </div> 

    <div class="pin pin-down" data-xpos="280" data-ypos="206">  
    <strong> tooltip 5 </strong><br/> 
    Area : 43,820,000<br/> 
     Population: 3,879,000,000 <a href="#">Click here for more info(need to give link here for new pop div..for all other tooltips)</a> 
    </div> 

    <div class="pin pin-down" data-xpos="750" data-ypos="310">  
    <strong> tooltip 5 </strong><br/> 
    Area : 43,820,000<br/> 
     Population: 3,879,000,000 <a href="#">Click here for more info(need to give link here for new pop div..for all other tooltips)</a> 
    </div> 

    <div class="pin pin-down" data-xpos="850" data-ypos="310">  
    <strong> tooltip 5 </strong><br/> 
    Area : 43,820,000<br/> 
     Population: 3,879,000,000 <a href="#">Click here for more info(need to give link here for new pop div..for all other tooltips)</a> 
    </div> 
</div> 

Answer 1

これは、アンカーの後divを追加します。

$('a').click(function() 
{ 
    var currTag = $(this); 
    if (currTag.next('div').attr('name')) 
    { 
     currTag.next('div').remove(); 
    } 
    else 
    { 
     currTag.after("<div name='details'>Here's more information</div>"); 
    } 
});