javascript - 使 元素出现在悬停时并保持在与被点击按钮的相同 ID 相对应的点击上

Question

您好，我已经探索了很多方法来使图像在单击元素时出现，例如显示: block 或可见性:可见或 .show()。但是，我遇到的问题是让图像出现在另一个 div 容器中，该容器的类与用户悬停并单击的按钮 ID 相匹配。还有另一个问题使图像在点击后仍然存在。任何建议都会很棒。

HTML

<div id="list">
  <div id="button-list">
    <ul>
        <li id="header1" class ="inactive"><h2>Upper Body</h2></li>
        <li id="front-neck" class="upper">Front Neck</li>
        <li id="back-neck" class= "upper">Back Neck</li>
        <li id="trapezius" class= "upper">Trapezius</li>
        <li id="shoulder" class= "upper">Shoulder</li>
        <li id="biceps" class= "upper">Bicep</li>
        <li id="triceps" class= "upper">Tricep</li>
        <li id="forearm" class= "upper">Forearm Extensor</li>
        <li id="forearm" class= "upper">Forearm Flexor</li>
        <li id="header2" class="inactive"><h2>Lower Body</h2></li>
        <li id="hamstring" class="lower">Hamstring</li>
        <li id="calf" class="lower">Calf</li>
        <li id="it-band" class="lower">IT Band</li>
        <li id="adductor" class="lower">Adductor</li>
        <li id="quadricep" class="lower">Quadricep</li>
    </ul>
    </div>  
</div>
    <div id="anatomy-container">
        <img class="front-neck" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/front-neck2.png"/></span>
        <img class="back-neck" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Back-Neck-2.png"/></span>
        <img class="trapezius" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Traps2.png"/></span>
        <img class="shoulder" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Interior-Deltoid2.png"/></span>
        <img class="biceps" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Bicep-2.png"/></span>
        <img class="triceps" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Tricep2.png"/></span>
        <img class="forearm" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/extensor2.png"/></span>
        <img class="forearm"src ="http:// m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/FLEXER2.png"/></span>
        <img class="hamstring" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Hammy2.png"/></span>
        <img class="calf"src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Calf2.png"/></span>
        <img class="it-band" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/IT-BAND-2.png"/></span>
        <img class="adductor" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Addcutor2.png"/></span>
        <img class="quadricep" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Quad2.png"/></span>
    </div>
<div id="list-container">
  <ul id="container">
  </ul>
</div>

CSS

 body {
  padding-top: 80px;
  text-align: center;
  font-family: monaco, monospace;

}
h1 {
  font-size: 30px
}
h2 {
  font-size: 20px;
}
ul {
 list-style-type: none; 
}
#header1, #header2 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
    margin: 0 0 10px 0;
}

#header1:hover, #header2:hover, #header1:active, #header2:active {
    background-color: #4CAF50;
    color: white;
}
.upper, .lower {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    margin: 0 0 10px 0;
    padding: 10px 5px;
}

.upper:hover, .lower:hover {
    background-color: #008CBA;
    color: white;
}
#list {
    position: relative;
}
#button-list{
    width: 300px; 
}
#highlight{
 height: 500px;
 width: 500px;
}
#list-container{
  border: 2px solid white;
  padding:10px;
  height: 350px;
  width: 200px;
  position: relative;
  right: 0px;
}
#front-neck{
 left: 300px;
 position: relative;
 bottom: 400px;
}
#tasdf{
  height:85px;
  width: 200px;
}

JavaScript

var jsonString = {
  "stretches": [{
    "area": "front-neck",
    "name": "front-neck",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/fneck1.jpg",
    "type": "static"
  }, {
    "area": "back-neck",
    "name": "back-neck",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1173.jpg",
    "type": "static"
  }, {
    "area": "side-neck",
    "name": "side-neck",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sideNeck.jpg",
    "type": "static"
  }, {
    "area": "entire-neck",
    "name": "neck-rolls",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/neckRollStretch.jpg",
    "type": "dynamic"
  }, {
    "area": "trapezius",
    "name": "upper-trapezius",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch3.jpg",
    "type": "static"
  }, {
    "area": "trapezius",
    "name": "lower-trapezius",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch.jpg",
    "type": "static"
  }, {
    "area": "trapezius",
    "name": "trapezius",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch2.jpg",
    "type": "dynamic"
  }, {
    "area": "shoulder",
    "name": "shoulder-raise",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/shoulderRaise.jpg",
    "type": "static"
  }, {
    "area": "shoulder",
    "name": "shoudler",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1198.jpg",
    "type": "static"
  }, {
    "area": "shoulder",
    "name": "arm-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/shoulderCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "shoulder",
    "name": "elbow-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/elbowCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "shoulder",
    "name": "upward-shoulder",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/upwardShoulder.jpg",
    "type": "static"
  }, {
    "area": "triceps",
    "name": "tricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/tricepStretch.jpg",
    "type": "static"
  }, {
    "area": "triceps",
    "name": "tricep-side",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/tricepSideStretch.jpg",
    "type": "static"
  }, {
    "area": "biceps",
    "name": "standing-bicep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepStanding.jpg",
    "type": "static"
  }, {
    "area": "biceps",
    "name": "seated-bicep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepSeated.jpg",
    "type": "static"
  }, {
    "area": "biceps",
    "name": "bicep-side",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepSide.jpg",
    "type": "static"
  }, {
    "area": "forearm",
    "name": "forearm-bench",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/forearmTable.jpg",
    "type": "static"
  }, {
    "area": "forearm",
    "name": "standing-forearm",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/forearmWall.jpg",
    "type": "static"
  }, {
    "area": "forearm",
    "name": "wrist-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/wristCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "it-band",
    "name": "seated-glute",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/seatedGlute.jpg",
    "type": "static"
  }, {
    "area": "it-band",
    "name": "ankle-to-knee",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/ankleToKneeGlute.jpg",
    "type": "static"
  }, {
    "area": "it-band",
    "name": "across-body",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/acrossBody.jpg",
    "type": "static"
  }, {
    "area": "it-band",
    "name": "leg-swings",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwings.jpg",
    "type": "dynamic"
  }, {
    "area": "hamstring",
    "name": "leg-swings",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwingsHam.jpg",
    "type": "dynamic"
  }, {
    "area": "hamstring",
    "name": "hamstring",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/hamstring.jpg",
    "type": "static"
  }, {
    "area": "hamstring",
    "name": "walking-kicks",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/hamstringWalking.jpg",
    "type": "dynamic"
  }, {
    "area": "hamstring",
    "name": "lying-hamstring",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1217.jpg",
    "type": "static"
  }, {
    "area": "hamstring",
    "name": "leg-up-hamstring",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legUpHamstring.jpg",
    "type": "dynamic"
  }, {
    "area": "calf",
    "name": "ankle-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/ankleCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "calf",
    "name": "calf-wall",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/wallCalf.jpg",
    "type": "static"
  }, {
    "area": "calf",
    "name": "seated-calf",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/seatedCalf.jpg",
    "type": "static"
  }, {
    "area": "calf",
    "name": "stair-calf",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/stairCalf.jpg",
    "type": "static"
  }, {
    "area": "adductor",
    "name": "butterly",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/butterflyAdductor.jpg",
    "type": "static"
  }, {
    "area": "adductor",
    "name": "standing-groin",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/standingAdductor.jpg",
    "type": "static"
  }, {
    "area": "adductor",
    "name": "leg-swings",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwings.jpg",
    "type": "dynamic"
  }, {
    "area": "adductor",
    "name": "sumo",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sumoAdductor.jpg",
    "type": "dynamic"
  }, {
    "area": "quadricep",
    "name": "kneeling-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/kneelingQuad-1.jpg",
    "type": "static"
  }, {
    "area": "quadricep",
    "name": "lying-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/lyingQuad.jpg",
    "type": "static"
  }, {
    "area": "quadricep",
    "name": "bench-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/benchQuad.jpg",
    "type": "static"
  }, {
    "area": "quadricep",
    "name": "scorpion",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/scorpionQuad.jpg",
    "type": "dynamic"
  }, {
    "area": "quadricep",
    "name": "sitting-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sittingQuadricep.jpg",
    "type": "static"
  }]
}

$(function() {
 //THIS IS WHERE I INSERTED THE FUNCTION
  $("#anatomy-container img").hide();
  $('li').on("click,hover", "#button-list li", function() {
    imgClass = $(this).attr('id');
    $("#anatomy-container img").hide(); // hide all images
    $("#anatomy-container ." + imgClass).show(); //show only image that  
  });

  $("li.upper").hide();
  $("li.lower").hide();
  $("#header1").on('click', function() {
    $("li.upper").slideToggle();
    var buttonState = $("li#header1").attr("class");
    if (buttonState == "inactive") {
      $("li#header1").removeClass("inactive");
      $("li#header1").addClass("active");
      $(this).css({
        "background": "#4CAF50",
        "color": "white"
      });
    } else {
      $("li#header1").removeClass("active");
      $("li#header1").addClass("inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  $("#header2").click(function() {
    $("li.lower").slideToggle();
    var buttonState = $("li#header2").attr("class");
    if (buttonState == "inactive") {
      $("li#header2").removeClass("inactive");
      $("li#header2").addClass("active");
      $(this).css({
        "background": "#4CAF50",
        "color": "white"
      });
    } else {
      $("li#header2").removeClass("active");
      $("li#header2").addClass("inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  $("li.upper").on("click", function() {
    var buttonState = $(this).attr("class");
    if (buttonState == "upper inactive") {
      $(this).removeClass("upper inactive");
      $(this).addClass("upper active");
      $(this).css({
        "background": "#008CBA",
        "color": "white"
      });
    } else {
      $(this).removeClass("upper active");
      $(this).addClass("upper inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  $("li.lower").on("click", function() {
    var buttonState = $(this).attr("class");
    if (buttonState == "lower inactive") {
      $(this).removeClass("lower inactive");
      $(this).addClass("lower active");
      $(this).css({
        "background": "#008CBA",
        "color": "white"
      });
    } else {
      $(this).removeClass("lower active");
      $(this).addClass("lower inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  //THIS IS THE AREA I'M TRYING TO FIX!!!

  var myData = jsonString;
  var newContent = '';
  var selected = null;
  $('li').click(function(e) {
    e.preventDefault();
    selected = $(this).attr("id");
    newContent = "";

    /** Perhaps a quite different json structure could remove the for loop **/
    for (var i = 0; i < myData.stretches.length; i++) {
      if (selected == myData.stretches[i].area) {
        newContent += '<li id = "' + selected + '-img" class = "' + myData.stretches[i].area + '">';
        newContent += '<a href="' + myData.stretches[i].ref + '">'; /** ref is not defined in JSON **/
        newContent += '<img src="' + myData.stretches[i].pic + '">';
        //newContent += '<p "'+responseObject.stretches[i].name+'">';
        newContent += '</a> + </li>';
      }
    }
    console.log(newContent);
    $('#container').html(newContent);
  });
});

Answer 1

您可以使用 jQuery 轻松完成。正如您在问题中所描述的那样，您有一个按钮列表和与该按钮对应的图像。

$(function() {
    $(document).on("click", "#button-list li", function() {

        imgClass = $(this).attr('id');
        $("#anatomy-container img").hide(); // hide all images
        $("#anatomy-container ." + imgClass).show(); //show only image that class match with button id 

    });
    $(document).on("mouseover", "#button-list li", function() {

        imgClass = $(this).attr('id');
        $("#anatomy-container img").hide(); // hide all images
        $("#anatomy-container ." + imgClass).show(); //show only image that class match with button id 

    });
});

希望对您有所帮助。