私は特定のdivにリンクしたい3つのテキスト要素を持っています。以下のコードは動作しますが、これをスクリプト化するにはどうすればよいでしょうか？

Question

私はjQueryの絶対的なnoobですが、それを理解しようとしていますが、遅いプロセスです。

私は3つのテキスト要素を持っていますが、それらは自分のdivにあります。

私はこのコードを手に入れましたが、可能な限り長く、効率的な方法を実行しました。誰かが私にこれを行うためのより効率的な方法を示して各スクリプトは何をしているのですか？

私はここで見ることができJSFiddleを設定している：http://jsfiddle.net/gavAusWeb/ZYVKM/

私もここにもコードのために私が悪い言い訳に貼り付けられます：

PSを。このような初心者であることを申し訳ありません。私はできる限りこのことを理解しようとしています。：/ 事前に感謝!!

HTML：

<div id="sideMap"> 

    <ul> 
     <li class="icon1"><div id="jq_icon1" class="jq_icon"></div></li> 
     <li class="icon2"><div id="jq_icon2" class="jq_icon"></div></li> 
     <li class="icon3"><div id="jq_icon3" class="jq_icon"></div></li> 
    </ul> 

</div> 


    <div class="tenPxSpr"></div> 

    <div id="contactDeetHold"> 
     <!-- ****************** -->   
     <div id="iconText1" class="iconText">Location1</div> 
     <div id="contactDetails"> 
      1345 Smooth St, Loaction1, 
      <br />NSW, Australia, 0000 
     </div> 
     <!-- ****************** --> 

     <!-- ****************** --> 
    <div id="iconText2" class="iconText">Location2</div> 
     <div id="contactDetails"> 
     1345 Smooth St, Loaction2, 
     <br />NSW, Australia, 0000 
    </div> 
    <!-- ****************** --> 

    <!-- ****************** --> 
    <div id="iconText3" class="iconText">Location3</div> 
     <div id="contactDetails"> 
     1345 Smooth St, Loaction3, 
     <br />NSW, Australia, 0000 
    </div> 
    <!-- ****************** --> 
</div>​ 

CSS：

#sideMap { 
    height:236px; 
    height:359px; 
    background:url(); 
} 
#sideMap li { 
list-style:none; 

} 
.jq_icon { 
    width:25px; 
    height:25px; 
    background:url(http://www.visitnorway.com/ImageVault/Images/id_4893/scope_0/ImageVaultHandler.aspx) no-repeat; 
    z-index:1; 
    position:absolute; 
} 
.hoverMap { 
    width:25px; 
    height:25px; 
    background:url(http://engineering.dartmouth.edu/images/image_1067.gif) no-repeat; 
    z-index:1; 
    position:absolute; 
} 
.jq_icon:hover { 
    width:25px; 
    height:25px; 
    background:url(http://engineering.dartmouth.edu/images/image_1067.gif) no-repeat; 
    z-index:1; 
    position:absolute; 
} 

.icon1 { 
    position:absolute; 
    margin:220px 0px 0px 160px; 
} 
.icon2 { 
    position:absolute; 
    margin:210px 0px 0px 120px;  
} 
.icon3 { 
    position:absolute; 
    margin:330px 0px 0px 105px; 
} 
.icon4 { 
    position:absolute; 
    margin:330px 0px 0px 105px; 
} 
.iconText { 
    color:#4D4D4D; 
    font-weight:100; 
} 
.iconText1 { 
    color:#4D4D4D; 
    font-weight:100; 
} 
.iconText2 { 
    color:#4D4D4D; 
    font-weight:100; 
} 
.iconText3 { 
    color:#4D4D4D; 
    font-weight:100; 
} 
.iconText:hover { 
    color:#4D4D4D; 
    font-weight:bold; 
} 
.iconTextHov { 
    color:#4D4D4D; 
    font-weight:bold; 
} 
#contactDeetHold { 
    padding:0px 20px 0px 20px; 
} 
#contactDetails { 
    font-size:10px; 
    margin-bottom:10px; 
}​ 

はJQuery：

$(document).ready(function() { 



/*---------------------*/ 
$(function() { 

    $("#iconText1") 
     .mouseover(function(){ 
      $("#jq_icon1").addClass("hoverMap"); 
    }) 
     .mouseout(function(){ 
      $("#jq_icon1").removeClass("hoverMap"); 
    }); 

    $("#iconText2") 
     .mouseover(function(){ 
      $("#jq_icon2").addClass("hoverMap"); 
    }) 
     .mouseout(function(){ 
      $("#jq_icon2").removeClass("hoverMap"); 
    }); 

    $("#iconText3") 
     .mouseover(function(){ 
      $("#jq_icon3").addClass("hoverMap"); 
    }) 
     .mouseout(function(){ 
      $("#jq_icon3").removeClass("hoverMap"); 
    }); 

}); 
/*---------------------*/ 

/*---------------------*/ 
$(function() { 

    $("#jq_icon1") 
     .mouseover(function(){ 
      $("#iconText1").addClass("iconTextHov"); 
    }) 
     .mouseout(function(){     
      $("#iconText1").removeClass("iconTextHov"); 
    }); 

    $("#jq_icon2") 
     .mouseover(function(){ 
      $("#iconText2").addClass("iconTextHov"); 
    }) 
     .mouseout(function(){     
      $("#iconText2").removeClass("iconTextHov"); 
    }); 

    $("#jq_icon3") 
     .mouseover(function(){ 
      $("#iconText3").addClass("iconTextHov"); 
    }) 
     .mouseout(function(){     
      $("#iconText3").removeClass("iconTextHov"); 
    }); 

}); 
/*---------------------*/ 


});​ 

Answer 1

は、あなたの自己を繰り返しあなたのコードは単純ではないようにするには、あなたはこの試みることができる：

$('.iconText').hover(function(){ 
    var n = this.id.match(/\d+/); // Find the number in id 
    $('#jq_icon' + n).toggleClass('hoverMap'); 
}); 

$('.jq_icon').hover(function(){ 
    var n = this.id.match(/\d+/); 
    $('#iconText' + n).toggleClass('iconTextHov'); 
}); 

を

あなたはindex()でもそれをやることができますが、あなたのHTMLはちょっと面倒です。すべての.iconText divをラッパーの中に置くことができます。 Btw、なぜdivを使用して、h1を使用しないのですか、私はそれがこの場合より意味的に正しいと思います。