0
こんにちは、青いボタンの1つをクリックしてdivコンテナを更新したいと思います。これを行うには、JSON、AJAX JavaScriptを組み込みました。残念ながら私は何も出せません。アドバイスをいただければ幸いです。AJAXとJavascriptを使用してdivコンテナを更新しています。
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;
});
});
なぜjsonファイルをもう一度解析しようとしていますか？それはすでに適切な方法ではありませんか？ところで、 – Livingstone
あなたのHTMLに重複IDがあります。 – adgelbfish
申し訳ありませんが、私はJSONの真新しいです。 JSON文字列を解析して名前をmyDataに変更する必要がありますか？また、Idの値を適切な値に変更しました – RyeGuy