Question

我正在做一个危险的董事会，并且我已经在index.html中给每个div（每个问题广场）一个id，所以当它被点击时，会出现正确的问题。我还想根据id设置每个div的point值，所以我使用了jquery .is和if if / else语句。我只完成了A1和A2的代码，但A2应该价值200美元，它的回报价值100美元。为什么呢？

if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) {
questionValue = 100;
}
else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) {
questionValue = 200;
}
else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) {
questionValue = 300;
}
else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) {
questionValue = 400;
}
else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) {
questionValue = 500;
}

提前谢谢你。如果我要包含更多代码，请告诉我。 .well是问题广场的div类。

添加HTML代码

<div id="wrapper">

     <div class="row">
       <div class="title"><h2></h2></div>
        <div class="question">
        <form> Your Answer:
      <input type="text" id="answer" /></form>
      <button id="submit">Submit</button>
      <p id="instruct">When you're sure about your probably wrong answer, click submit</p>

     <!--  <div class = "result"> </div> -->

    </div>
    </div>


    <div class="row">
       <div class="well" id="A1">  <p>$100</p>  </div>
       <div class="well" id="B1">  <p>$100</p> </div>
       <div class="well" id="C1">  <p>$100</p>  </div>
       <div class="well" id="D1">  <p>$100</p>  </div>
       <div class="well" id="E1">  <p>$100</p>   </div>  
    </div>

    <div class="row">
       <div class="well" id="A2"> <p>$200</p>    </div>
       <div class="well" id="B2"> <p>$200</p>    </div>
       <div class="well" id="C2"> <p>$200</p>    </div>
       <div class="well" id="D2"> <p>$200</p>    </div>
       <div class="well" id="E2"> <p>$200</p>    </div> 
    </div>

    <div class="row">
       <div class="well" id="A3">  <p>$300</p>   </div>
       <div class="well" id="B3">  <p>$300</p>   </div>
       <div class="well" id="C3">  <p>$300</p>   </div>
       <div class="well" id="D3">  <p>$300</p>   </div>
       <div class="well" id="E3">  <p>$300</p>   </div> 
    </div>
    <div class="row">
       <div class="well" id="A4"> <p>$400</p>     </div>
       <div class="well" id="B4"> <p>$400</p>    </div>
       <div class="well" id="C4"> <p>$400</p>    </div>
       <div class="well" id="D4"> <p>$400</p>    </div>
       <div class="well" id="E4"> <p>$400</p>    </div>   
    </div>
    <div class="row">
       <div class="well" id="A5"><p>$500</p>     </div>
       <div class="well" id="B5"><p>$500</p>      </div>
       <div class="well" id="C5"><p>$500</p>      </div>
       <div class="well" id="D5"><p>$500</p>      </div>
       <div class="well" id="E5"><p>$500</p>      </div> 
    </div>
    <h3> score = </h3>
    <div class = "score">0</div>

</div>

这就是我在做每个问题的方式。

$("#A1").click(function() {

             $(".question").show();
             $('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
             $('#submit').click(function() {
                 $("#answer").on('input')
                    var answer = $('#answer').val(); //what does this mean in words? 


                    if 
                        (answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
                        $('.question').replaceWith('<h3>omg you\'re so smart</h3>')      //using h3 because it'll be unique, but there must be a better way
                        score += questionValue;
                        $(".score").text("$" + score);
                    }
                    else 
                        {
                        $('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
                        score -= questionValue;
                        $(".score").text("$" + score);
         }

}）; }）;

Answer 1

到目前为止，您所实现的内容可能都是正确的，但我认为维护该代码非常困难。对于任何新人来说，理解这种逻辑会非常不安。请看下面的方法。你可以参考它并从中得出一个想法：

$(document).ready(function() {
  $(".well").click(function() {
    var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question
    alert(quesVal);
  });
});

.questionContainer {
  width: 250px;
}
.questionContainer .well {
  height: 40px;
  width: 40px;
  border: 1px solid red;
  margin-left: 5px;
  margin-top: 5px;
  float: left;
  /*Here you can also use display: inline-block instead of float:left*/
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="questionContainer">
  <!--Putting question value in each and every box along with id and class as a data- attribute -->
  <div class="well" id="A1" data-questionvalue="100">A1</div>
  <div class="well" id="B1" data-questionvalue="100">B1</div>
  <div class="well" id="C1" data-questionvalue="100">C1</div>
  <div class="well" id="D1" data-questionvalue="100">D1</div>
  <div class="well" id="E1" data-questionvalue="100">E1</div>
  <div class="well" id="A2" data-questionvalue="200">A2</div>
  <div class="well" id="B2" data-questionvalue="200">B2</div>
  <div class="well" id="C2" data-questionvalue="200">C2</div>
  <div class="well" id="D2" data-questionvalue="200">D2</div>
  <div class="well" id="E2" data-questionvalue="200">E2</div>
</div>

Answer 2

你可以试试这种方式

$('.well').click(function(){
if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) {
alert(100);
}
else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) {
alert(200);
}
})

它可能是长度方式但有效。

小提琴test

Answer 3

简化（这不会解决您的特定实现 - 但会以一种可以解决问题的方式简化它）

您可以使用类而不是为每个单元格使用特定ID，并且每个单元格中包含5个，每个1到5以及A到E：

<div class="row"> <!-- row 1 -->
    <div class="r1 a"></div>
    <div class="r1 b"></div>
<!-- blah blah -->
    <div class="r5 d"></div>
    <div class="r5 e"></div>
</div> <!-- row 5 -->

供参考：我使用r作为第一个字母，因为您无法使用数字来启动类名称。

然后在你的JavaScript中：

if($('.well').is('.r1')) questionValue = 100;

等等。

供参考：如果内容为一行（例如本例中），则可以跳过{}语句中的花括号if。

检查id以设置值

3 个答案:

简化（这不会解决您的特定实现 - 但会以一种可以解决问题的方式简化它）