javascript - さまざまな VAR を取得して、HTML で作成されたコンテナーに配置するにはどうすればよいですか?

Question

私は妻 (学校の先生) のために Jeopardy (クイズゲーム) ゲームに取り組んでいます。HTML は、複数の列と複数の行を持つように設定されています。

私のHTMLの例:

<body>

<div id="container">

<div id="logo" class="center">

<img src="jeoparody.png" />

</div>

<div id="wood" class="center">
    <ul id="categories">
        <li>The Global Age</li>
        <li>Age of Revolutions</li>
        <li>Era of Global Wars</li>
        <li>The Post War Period</li>
        <li>Geography</li>
    </ul>

<div class="clear"></div>

<hr />

<div class="clear"></div>

    <ul id="rowOne">
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
        <li><a href="#">$100</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowTwo" class="center">
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
        <li><a href="#">$200</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowThree" class="center">
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
        <li><a href="#">$300</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowFour" class="center">
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
        <li><a href="#">$400</a></li>
    </ul>

<div class="clear"></div>

    <ul id="rowFive" class="center">
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
        <li><a href="#">$500</a></li>
    </ul>
</div>

<div id="footer" class="center"></div>

</div>

<div id="clueContainer" class="center"></div>

</body>

私がやろうとしているのは、各行と列の「li」をクリックして、「a」をクリックすると、手がかりが入っているコンテナーに移動することです。私の jQuery コードでは、最初の列でこの偉業を達成しました。ただし、すべての列でこれを実現するコードを書くことはできません。

JQuery コード:

$(document).ready(function () {

    var columnOne = {
        "$100": "On the world political map, where were some of the major states and     empires located about 1500 A.D. (C.E.)?",
        "$200": "What were the artistic, literary, and intellectual ideas of the Renaissance?",
        "$300": "Where were the five world religions located around 1500 A.D. (C.E.)?",
        "$400": "What were the regional trading patterns about 1500 A.D. (C.E.)?",
        "$500": "Why were the regional trading patterns important?",
    };

var columnTwo = {
    "100": "What were the artistic, literary, and intellectual ideas of the Renaissance?",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};

var columnThree = {
    "100": "A",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};

var columnFour = {
    "100": "D",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};

var columnFive = {
    "100": "A",
    "200": "B",
    "300": "C",
    "400": "D",
    "500": "E",
};  

$('li').on('click', 'a', function () {
    var foo = $(this).text();
    $("#clueContainer").text( columnOne[foo] );
});

$("#rowTwo").on("click", "a", function () {
    var foo2 = $(this).text( columnTwoTwo[foo2] );
});

$("#container").click(function(){
$("#container").hide(function(){
    $("#clueContainer").show(function(){
    });
});

$("#clueContainer").click(function(){
$("#clueContainer").hide(function(){
    $("#container").show(function(){
    });
});
});

});
});

誰かが私の目標を達成するのを手伝ってくれますか、少なくとも私が間違っていることを理解するのを手伝ってくれますか?

CSS:

@font-face {
    font-family: 'korinna_btregular';
    src: url('fontsJ/korinna_regular_bt-webfont.eot');
    src: url('fontsJ/korinna_regular_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontsJ/korinna_regular_bt-webfont.woff') format('woff'),
         url('fontsJ/korinna_regular_bt-webfont.ttf') format('truetype'),
         url('fontsJ/korinna_regular_bt-webfont.svg#korinna_btregular') format('svg');
    font-weight: normal;
    font-style: normal;}

body{background-color: #000;}

hr{border: 3px solid #200b02;}

#wood{width: 960px;
height: auto;
background-image: url(woodGrain.png);
position: relative;
border: 3px solid #200b02;
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 1);}

#container{width: 100%;
margin: 5px;
padding: 5px;}

.center{width: 960px;
margin: 0px auto;}

.clear{clear: both;}

#logo{width: 960px;
height: 250px;
padding-top: 30px;
display: block;
text-align: center;
vertical-align: middle;
line-height: 250px;
background-color: #002290;}

#categories li{width: 175px;
height: 100px;
margin: 0px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
color: #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 14px;
vertical-align: middle;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 1);}

#categories a{color: #fff;
text-decoration: none;}

#rowOne li{width: 175px;
height: 100px;
margin: 5px 5px 0px -8px;
display: inline-block;
border: 1px solid #fff;
color: #e6ca8b;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);}

#rowOne a{color: #fcd830;
text-decoration: none;}

#rowOne li:hover{background-color: #a3bbfb;}

#rowTwo li{width: 175px;
height: 100px;
margin: 0px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);}

#rowTwo a{color: #fcd830;
text-decoration: none;}

#rowTwo li:hover{background-color: #a3bbfb;}

#rowThree li{width: 175px;
height: 100px;
margin: 5px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);}

#rowThree a{color: #fcd830;
text-decoration: none;}

#rowThree li:hover{background-color: #a3bbfb;}

#rowFour li{width: 175px;
height: 100px;
margin: 5px 5px 5px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);}

#rowFour a{color: #fcd830;
text-decoration: none;}

#rowFour li:hover{background-color: #a3bbfb;}

#rowFive li{width: 175px;
height: 100px;
margin: 5px 5px 20px -8px;
display: inline-block;
border: 1px solid #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
border-radius: 10px 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);}

#rowFive a{color: #fcd830;
text-decoration: none;}

#rowFive li:hover{background-color: #a3bbfb;}

#footer{width: 960px;
height: 20px;
background-color:#002290;}

/***Clues***/

#clueContainer{width: 900px;
height: 500px;
margin-top: 150px;
padding: 200px 100px 0 100px;
color: #fff;
font-family: 'korinna_btregular';
text-transform: uppercase;
font-size: 54px;
border: 1px solid #fff;
border-radius: 25px 25px;
background-color: #002290;
-webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);
display: none;}

score 0 · Accepted Answer

これは機能します：

$('li a').click(function () {
    var foo = $(this).html();
    //for debugging only, remove once it is working
    alert(foo);
    $("#clueContainer").html( columnOne[foo] );
});

javascript - さまざまな VAR を取得して、HTML で作成されたコンテナーに配置するにはどうすればよいですか?

1 に答える 1

Related

Reference