Question

您好我希望在点击其中一个蓝色按钮后更新div容器。为此，我已经整合了JSON，AJAX JavaScript。不幸的是，我无法得到任何东西。任何建议都将不胜感激。

HTML

<div id="list">
  <ul>
    <li id="header1" class ="inactive"><h2>Upper Body</h2></li>
    <li id="front neck" class= "upper">Front Neck<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/front-neck2.png"/></span></li>
    <li id="back neck" class= "upper">Back Neck<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Back-Neck-2.png"/></span></li>
    <li id="trapezius" class= "upper">Trapezius<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Traps2.png"/></span></li>
    <li id="shoulder" class= "upper">Shoulder<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Interior-Deltoid2.png"/></span></li>
    <li id="bicep" class= "upper">Bicep<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Bicep-2.png"/></span></li>
    <li id="tricep" class= "upper">Tricep<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Tricep2.png"/></span></li>
    <li id="forearm extensor" class= "upper inactive">Forearm Extensor<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/extensor2.png"/></span></li>
    <li id="forearm flexor" class= "upper">Forearm Flexor<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/FLEXER2.png"/></span></li>
    <li id="header2" class="inactive"><h2>Lower Body</h2></li>
    <li id="hamstring" class="lower">Hamstring<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Hammy2.png"/></span></li>
    <li id="calf" class="lower">Calf<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Calf2.png"/></span></li>
    <li id="it" class="lower">IT Band<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/IT-BAND-2.png"/></span></li>
    <li id="adductor" class="lower">Adductor<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Addcutor2.png"/></span></li>
    <li id="quadricep" class="lower">Quadricep<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Quad2.png"/></span></li>
  </ul>
</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;
}
span {
  background: #fd0;
}
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;
    width: 300px;
}
 span { /*CSS for enlarged image*/
position: absolute;
background-color: white;
left: -1005px;
visibility: hidden;
}

.upper:hover span, .lower:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 320px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
#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;
}
#img{
  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() {
  $("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"
    });
    }
});

//THIS IS THE AREA I'M TRYING TO FIX!!!

    var myData = jsonString;
    var newContent = '';
    var selected = null;
    $('li').click(function(e){
            e.preventDefault();
        for(var i = 0; i < myData.stretches.length; i++){
            if(selected == myData.stretches[i].area){
                newContent += '<li id = "' +img+ '" class = "'+ myData.stretches[i].area +'">';
                newContent += '<a href="'+myData.stretches[i].ref+'">';
                newContent += '<img src="'+myData.stretches[i].pic+'">';
                //newContent += '<p "'+responseObject.stretches[i].name+'">';
                newContent += '</a> + </li>';
            }
        }
    document.getElementById('container').innerHtml = newContent;
        });
});

Answer 1

JSON.parse

=＆GT; var myData = jsonString;

并改变行

var selected = document.activeElement.getElementsByClassName();

到

var selected = null;

由于 getElementsByClassName()需要一个参数，到目前为止你还不需要它。

使用AJAX和Javascript更新Div容器

1 个答案: