jQuery拖放对应答案验证

Question

我正在构建一个拖放式测验，您可以在其中将答案从答案池中放入相应的列中。

您可以在每列中输入的答案数量有限。

大部分情况下，我都可以正常工作。但是，工具的编写方式，每个答案槽只能有一个正确答案，我希望有多个正确答案。

例如： http://jsfiddle.net/Hr465/

在第一栏中，正确答案是“挑战现状”和“冒险”。 但是，颠倒顺序，“冒险”在“挑战现状”之上，答案是错误的。

问题归结为验证函数的这一行

        if($('#mover'+x).parent().attr('id') == "takercontent"+x){

基本上我想用 && 重写它。所以第一列#mover1 && #mover2，第二列等等等等。

Answer 1

不要使用所有这些 id，而是使用类，然后您可以使用 hasClass 方法进行验证。您仍然可以使用这些 ID，以便您的节目答案有效。

WORKING JS FIDDLE

新的验证码：

function validateactivity(){

    for(var x=1; x<=totalmovers; x++){
        if($('#mover'+x).parent().hasClass("takercontent"+x)){
            $('#mover'+x).parent().css('border','2px solid #0F0'); //green
        } else {
            $('#mover'+x).parent().css('border','2px solid #F00');
        }
    } 
}

新的 HTML：

        <div class="takers" id="taker1">
            <div class="takerheader">Courage to Innovate</div>
            <ul class="takercontent takercontent1 takercontent2" id="takercontent1"></ul>
            <ul class="takercontent takercontent1 takercontent2" id="takercontent2"></ul>
        </div>

        <div class="takers" id="taker2">
            <div class="takerheader">Behavioural Skills</div>
            <ul class="takercontent  takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent3"  ></ul>
            <ul class="takercontent  takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent4" ></ul>
            <ul class="takercontent  takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent5" ></ul>
            <ul class="takercontent takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent6"></ul>
        </div>

        <div class="takers" id="taker3">
            <div class="takerheader">Cognitive Skill to synthesize novel inputs</div>
            <ul class="takercontent takercontent7" id="takercontent7"></ul>
        </div>

        <div class="takers" id="taker4">
            <div class="takerheader">Leads to…</div>
            <ul class="takercontent takercontent8" id="takercontent8"></ul>
        </div>