javascript - jquery 列表悬停改变侧 img

Question

我需要有一个图标列表，每当 <li> 时，这些图标都会更改侧板 div 中的图像和标题。元素被悬停时，当没有任何东西被悬停时有一个默认图像(“i.png”)，只要用户光标离开 <ul> 就会返回, 这是 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>

现在这实际上工作正常，但我想知道是否有任何更清洁的方法来做到这一点。我是 jquery 的初学者，但它看起来真的很长。

Answer 1

给您一个解决方案 https://jsfiddle.net/9fczjsgu/

var dic = {
  "brain" : {
    img: "a.png",
    text: "lorem"
  },
  "body" : {
  	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>

创建一个字典(JSON)，以 id 为键 & 它会再次包含 JSON 形式的值和 image & 文本。

希望对您有所帮助。