У меня есть 3 текстовых элемента, которые я хочу связать с определенным div когда-то зависшим, приведенный ниже код работает, но что может быть лучше для написания этого сценария?

Question

Я абсолютный новичок в jQuery, я пытаюсь понять это ... но это медленный процесс ..

У меня есть 3 текстовых элемента, которые живут в своих собственных div'ах, как только они обнаружены, яхочу, чтобы каждый из них вызывал функцию addClass на другом div.

У меня есть этот код для работы, но я сделал это самым длинным и наименее эффективным способом. Может кто-нибудь показать мне более эффективный способсделайте это и объясните, что делает каждый скрипт .. ??

Я установил JSFiddle, с которым можно ознакомиться здесь: http://jsfiddle.net/gavAusWeb/ZYVKM/

Я также вставлю свое плохое оправдание для кодаздесь также:

пс.извините, что такой новичок .. Я пытаюсь понять это как можно лучше ..: / Заранее спасибо !!

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 в оболочку, это можно сделать.Кстати, зачем использовать div, а не h1, я думаю, что это более семантически правильно в этом случае.