jquery list schwebende Seite ändern img

Question

Ich brauche eine Liste von Symbolen, die das Bild und den Titel im Siding Div ändern, wenn ein Element <li> schwebt, gibt es ein Standardbild, wenn nichts schwebt ("i. png "), die zurückkommt, wenn der Benutzer den Cursor den <ul> verlassen, hier ist der html:

$("#brain").hover(function() { 
 
     $("#brain img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "a.png"); 
 
     $("#icon-image-header").text("lorem"); 
 
     }); 
 
     $("#brain").mouseleave(function() { 
 
     $("#brain img").css("opacity", "0.5"); 
 
     }); 
 
     $("#body").hover(function() { 
 
     $("#body img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "b.png"); 
 
     $("#icon-image-header").text("ipsum"); 
 
     }); 
 
     $("#body").mouseleave(function() { 
 
     $("#body img").css("opacity", "0.5"); 
 
     }); 
 
     $("#planning").hover(function() { 
 
     $("#planning img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "c.png"); 
 
     $("#icon-image-header").text("dolor"); 
 
     }); 
 
     $("#planning").mouseleave(function() { 
 
     $("#planning img").css("opacity", "0.5"); 
 
     }); 
 
     $("#pen").hover(function() { 
 
     $("#pen img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "d.png"); 
 
     $("#icon-image-header").text("sit"); 
 
     }); 
 
     $("#pen").mouseleave(function() { 
 
     $("#pen img").css("opacity", "0.5"); 
 
     }); 
 
     $("#front").hover(function() { 
 
     $("#front img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "e.png"); 
 
     $("#icon-image-header").text("amet"); 
 
     }); 
 
     $("#front").mouseleave(function() { 
 
     $("#front img").css("opacity", "0.5"); 
 
     }); 
 
     $("#pie").hover(function() { 
 
     $("#pie img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "f.png"); 
 
     $("#icon-image-header").text("lorem"); 
 
     }); 
 
     $("#pie").mouseleave(function() { 
 
     $("#pie img").css("opacity", "0.5"); 
 
     }); 
 
     $("#bulb").hover(function() { 
 
     $("#bulb img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "g.png"); 
 
     $("#icon-image-header").text("ipsum"); 
 
     }); 
 
     $("#bulb").mouseleave(function() { 
 
     $("#bulb img").css("opacity", "0.5"); 
 
     }); 
 
     $("#db").hover(function() { 
 
     $("#db img").css("opacity", "1"); 
 
     $("#exp-img").attr("src", "h.png"); 
 
     $("#icon-image-header").text("dolor"); 
 
     }); 
 
     $("#db").mouseleave(function() { 
 
     $("#db img").css("opacity", "0.5"); 
 
     }); 
 
     $("#skills-icons").mouseleave(function() { 
 
     $("#icon-image-header").text("Lorem"); 
 
     $("#exp-img").attr("src", "i.png"); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="container"> 
 
    <div class="col-2" id="our-expertise-image"> 
 
    <div class="icon-image-container"> 
 
     <img src="i.png" alt="" id="exp-img"> 
 
    </div> 
 
     <h1 id="icon-image-header"> 
 
     Lorem 
 
     </h1> 
 
    </div> 
 
    <div class="col-2" id="our-expertise-icons"> 
 
    <h3 class="cat-header"><span>+</span>Lorem</h3> 
 
    <h1>Lorem Ipsum Dolor</h1> 
 
    <ul id="skills-icons"> 
 
     <li id="brain"><img src="brain-icon.png" alt=""></li> 
 
     <li id="body"><img src="body-icon.png" alt=""></li> 
 
     <li id="planning"><img src="planning-icon.png" alt=""></li> 
 
     <li id="pen"><img src="pen-icon.png" alt=""></li> 
 
     <li id="front"><img src="front-icon.png" alt=""></li> 
 
     <li id="pie"><img src="piegraph-icon.png" alt=""></li> 
 
     <li id="bulb"><img src="bulb-icon.png" alt=""></li> 
 
     <li id="db"><img src="db-icon.png" alt=""></li> 
 
    </ul> 
 
    </div> 
 
</article>

Nun ist diese tatsächlich funktioniert gut, aber ich habe mich gefragt, ob es eine sauberere Möglichkeit zu tun, Dies. Ich bin ein Anfänger in jQuery, aber es scheint wirklich lange.

Answer 1

Hier gehen Sie mit einer Lösung https://jsfiddle.net/9fczjsgu/

var dic = { 
 
    "brain" : { 
 
    img: "a.png", 
 
    text: "lorem" 
 
    }, 
 
    "body" : { 
 
    \t img: "b.png", 
 
    text: "ipsum" 
 
    }, 
 
    "planning" : { 
 
    img: "c.png", 
 
    text: "dolor" 
 
    }, 
 
    "pen" : { 
 
    img: "d.png", 
 
    text: "sit" 
 
    }, 
 
    "front" : { 
 
    img: "e.png", 
 
    text: "amet" 
 
    }, 
 
    "pie" : { 
 
    img: "f.png", 
 
    text: "lorem" 
 
    }, 
 
    "bulb" : { 
 
    img: "g.png", 
 
    text: "ipsum" 
 
    }, 
 
    "db" : { 
 
    img: "h.png", 
 
    text: "dolor" 
 
    } 
 
}; 
 

 
$("li").hover(function() { 
 
    $(this).find("img").css("opacity", "1"); 
 
    $("#exp-img").attr("src", dic[$(this).attr('id').img]); 
 
    $("#icon-image-header").text(dic[$(this).attr('id').img]); 
 
}).mouseleave(function() { 
 
    $(this).find("img").css("opacity", "0.5"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="container"> 
 
    <div class="col-2" id="our-expertise-image"> 
 
    <div class="icon-image-container"> 
 
     <img src="i.png" alt="" id="exp-img"> 
 
    </div> 
 
     <h1 id="icon-image-header"> 
 
     Lorem 
 
     </h1> 
 
    </div> 
 
    <div class="col-2" id="our-expertise-icons"> 
 
    <h3 class="cat-header"><span>+</span>Lorem</h3> 
 
    <h1>Lorem Ipsum Dolor</h1> 
 
    <ul id="skills-icons"> 
 
     <li id="brain"><img src="brain-icon.png" alt=""></li> 
 
     <li id="body"><img src="body-icon.png" alt=""></li> 
 
     <li id="planning"><img src="planning-icon.png" alt=""></li> 
 
     <li id="pen"><img src="pen-icon.png" alt=""></li> 
 
     <li id="front"><img src="front-icon.png" alt=""></li> 
 
     <li id="pie"><img src="piegraph-icon.png" alt=""></li> 
 
     <li id="bulb"><img src="bulb-icon.png" alt=""></li> 
 
     <li id="db"><img src="db-icon.png" alt=""></li> 
 
    </ul> 
 
    </div> 
 
</article>

ein Wörterbuch erstellen (JSON), mit id s als Schlüssel & es Wert wieder in einer Form von JSON mit image enthalten & text.

Hoffe, das wird Ihnen helfen.