Question

https://jsfiddle.net/boriskay/thsmdqrt/3/

在JS代码中，您可以看到文本输入问题通过对象数组进行验证，但此方法不适用于下拉列表问题（正确的答案是“Botas”）。

如何验证正确答案？

提前谢谢。

HTML：

<div id="map">
  <img src="http://www.homedepot.com/catalog/productImages/1000/eb/ebd83d8b-6e6f-4526-8dd9-e063f0ef66bd_1000.jpg">
  <form>    
    <div id="q1C"><input id="q1" type="text" /></div>
    <div id="q2C"><input id="q2" type="text" /></div>
    <div id="q3C">
            <select id="q3">
                <option value="zapantandos">Zapatandos</option>
                <option value="botas">Botas</option>
                <option value="bripantas" id="truck">Bripantas</option>
            </select>
        </div>
        <input type="submit" id="submit" value="Click When Done" />
  </form>
</div>

JAVASCRIPT / JQUERY：

var answers = {
    "q1": ["Camisas", "camisas", "CAMISAS"],
    "q2": ["Zapatos", "zapatos", "ZAPATOS"],
    "q3": ["Botas", "botas", "BOTAS"]
};

function markAnswers() {
  $("input[type='text']").each(function() {
    console.log($.inArray(this.value, answers[this.id]));

    if($.inArray(this.value, answers[this.id]) === -1) {
      $(this).parent().append("<img class='result_pic' src='https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png' />");

    } else {
      $(this).parent().append("<img class='result_pic' src='http://image.flaticon.com/icons/png/128/74/74414.png' />");
      //$("form").append("Great job!");
    }
  })
}

$("form").on("submit", function(e){
    e.preventDefault();
    markAnswers();
    $("form").append("Great job!");
});

CSS：

#q1C, 
#q2C,
#q3C{
    position: absolute;
    display:flex;
    z-index:100;
  align-items:center;
}

#q1,#q2,#q3{
  height: 20px;
  float:left;
}

#q1C{   
    margin-top: -450px;
    margin-left: 350px; 
}

#q2C{   
    margin-top: -160px;
    margin-left: 350px;
}

#q3C{   
    margin-top: -610px;
    margin-left: 475px;
}

.result_pic {
    position: relative;
  z-index:100;
  width:20px;
  height:20px;
  margin-left:5px;
}

#submit {
    height: 35px;
    font-size: 17px;
    background-color: skyblue;
}

ol {
    list-style: none;
}

Answer 1

您的.each循环正在选择此项：

input[type='text']

...不会涵盖select元素。试试这个：

$("input[type='text'], select").each(function() {
  //...
});

制作Javascript / jQuery测验：下拉菜单Quest / ion Not Validating

1 个答案: