Javascript 正在检查id以设置值

我正在做一个危险板，我在index.html中给了每个div（每个问题方块）一个id，这样当它被点击时，正确的问题就会出现。我还想根据每个div的id设置其点值，所以我使用了jquery.is和这个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;
}

先谢谢你。请让我知道我是否应该包括任何更多的代码。好的，这是问题方块的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>

你的回答是:
提交
当您确定您的答案可能错误时，请单击提交
100美元
100美元
100美元
100美元
100美元
200美元
200美元
200美元
200美元
200美元
300美元
300美元
300美元
300美元
300美元
400美元
400美元
400美元
400美元
400美元
500美元
500美元
500美元
500美元
500美元
分数=
0

这就是我回答每个问题的方式

$("#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);
         }

$（“#A1”）。单击（函数（）{
$（“.question”）.show（）；
$（“最有价值球员”四分卫，当他不上场时，他的球队是14胜6负。”）.appendTo（“.question”）；
$（“#提交”）。单击（函数（）{
$（“#答案”）。关于（'输入'）
var answer=$（'#answer'）.val（）；//这在单词中是什么意思？
如果
（答案==“汤姆·布雷迪”|答案==“布雷迪”|答案==“布雷迪”|答案==“汤姆·布雷迪”）{
$（'.question'）.replaceWith（'omg you's smart'）//使用h3，因为它是唯一的，但必须有更好的方法
分数+=问题值；
$（“.score”）.text（“$”+score）；
}
其他的
{
$（'.question'）.replaceWith（'非常错误'）；
分数-=问题值；
$（“.score”）.text（“$”+score）；
}

}))； });

你可以这样试试

$('.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);
}
})

这可能是一条很长的路，但有效

---

Fiddle

到目前为止，您实现的任何东西都可能是正确的，但我想维护这些代码是非常困难的。同样，对于任何一个新人来说，t都很难理解这种逻辑。请看下面的方法。您可以参考它并从中获得一个想法：

$（文档）.ready（函数（）{
$（“.well”）。单击（函数（）{
var quesVal=$（this）.data（“questionvalue”）；//读取与每个问题关联的questionvalue
警报（quesVal）；
});
});
.questionContainer{
宽度：250px；
}
.好的{
高度：40px；
宽度：40px；
边框：1px纯红；
左边距：5px；
边缘顶部：5px；
浮动：左；
/*在这里，您还可以使用display:inline块而不是float:left*/
背景：橙色；
}

A1
地下一层
C1
D1
E1
A2
地下二层
C2
D2
E2
Simplification（这并不能解决您的特定实现，但可以通过某种方式将其简化，从而解决您的问题）
您可以使用类，而不是为每个单元格使用特定的ID，并且每个1到5和A到E中有5个：

<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 -->

等等

供参考：如果内容为一行（如本例中），则可以跳过
if
语句中的curlybraces
{}
。
如何设置
的“well”
类<如果任何元素既有类
“well”
，又有其中一个ID，那么代码>$（“.well”）.is（“#A1”、“#B1”、“#C1”、“#D1”、“#E1”）

将是真的-也许你的意思是

$（这）。如果代码运行在一个点击处理程序中，而
这个
将是点击项，那么（…）
？（还有，这不是问题，但在我看来，为每个级别设置公共类比测试所有ID要整洁得多。）请也添加HTML代码。为什么不使用选择器的组合呢？如果要检查元素是否具有class
.well
和id
#A5
只需编写选择器
$（'.well#A5'）
来选择所有匹配的元素。添加了html代码。仅供参考，我是一个初学者，所以几乎可以肯定有更好的方法来做几乎所有的事情。我能够做到这一点。看起来不太理想，因为我必须一次又一次地添加更多代码，但我会接受它。谢谢@尼克：是的……那是真的。您将在hTML中添加更多代码，但JS代码将变得只有几行。
if($('.well').is('.r1')) questionValue = 100;