jQuery追加邮件到每个标签

当点击检查按钮时，一个消息被追加到收音机组选中的单选按钮（正确或不正确）。我希望消息与所选的单选按钮对齐。此时这两条消息都应用于两个选中的单选按钮，而不是相关的正确或不正确的。jQuery追加邮件到每个标签

如何更新此脚本，以便正确检查按钮是否应用了正确的消息，以及是否应用了相关消息？

希望我不是太混乱:-)

$(".quiz__check").on("click", function() { 
    $("input:radio:checked").removeAttr("disabled"); 
    if($("input:radio:checked").length > 0){ 
    $("input:radio:checked").addClass("mPos");; 
    $("input:radio:checked").closest(".radio").find(".mPos + label").append($('.quiz__control-feedback')); 
    } 
});

的HTML

<div id="accessContainer"> 
    <form class="quiz" id="a01" name="a01"> 
    <div class="quiz__preamble"></div> 
    <ol class="assessment-list"> 
     <li> 
     <span><strong>Question 1:</strong> What question is this?</span> 
     <div></div> 
     <div aria-label="When should you make adjustments to the program or environment?" class="quiz__control accessibleRadio" id="a01-01-q09" role="radiogroup"> 
      <p><input data-set="a01-01-q09" id="a01-q09-e01" name="a01-01-q09" type="radio" value="a01-01-q09"> <label for="a01-q09-e01">This is question 1</label></p> 
      <p><input data-set="a01-01-q09" id="a01-q09-e02" name="a01-01-q09" type="radio" value="a01-01-q09"> <label for="a01-q09-e02">This is question 20</label></p> 
     </div> 
     </li> 

     <li> 
     <span><strong>Question 2:</strong> Is this question 2?</span> 
     <div></div> 
     <div aria-label="When should you teach children about diversity and difference?" class="quiz__control accessibleRadio" id="a01-01-q11" role="radiogroup"> 
      <p><input data-set="a01-01-q11" id="a01-q11-e01" name="a01-01-q11" type="radio" value="a01-01-q11"> <label for="a01-q11-e01">Yes</label></p> 
      <p><input data-set="a01-01-q11" id="a01-q11-e02" name="a01-01-q11" type="radio" value="a01-01-q11"> <label for="a01-q11-e02">No</label></p> 
     </div> 
     </li> 
    </ol> 
    <div class="quiz__buttons screen-only"> 
     <button class="quiz__reset btn btn-default" title="Clear my answers" type="reset">Reset</button> <button class="quiz__check btn btn-primary" id="check_answers" title="Check my answers" type="button">Check</button> 
    </div> 
    </form> 
</div>

来源

2017-06-21 Laurence L

您的HTML是一个*«硬»*一塌糊涂...检查它。我有奇怪的试图缩进它。认为容器。像特百惠。你的结束标签在错误的地方。 ---对不起，此评论不是adressisng问题..但问题格式。当你程序员..缩进你的代码。它保存调试。 –

谢谢Louys。我将重新格式化HTML并重新应用它。 –

HTML检查并重新格式化:-) –

你想要一个 “验证信息” 出现在Check点击。
而你想让它放在收音机的右边（所以在label之后）。

我为您的所有HTML收音机input添加了一个data属性。
才知道至极是正确的，不...

data-validation="1" // for good answer 

data-validation="0" // for wrong answer

一些CSS的邮件格式：

.validation-hint{ 
    margin-left:1em; 
    font-style:bold; 
} 
.correct{ 
    color:#44c744; 
} 
.incorrect{ 
    color:#F74444; 
}

然后这里是代码，使它看起来：

$(".quiz__check").on("click", function() { 
    var checked = $("input[type='radio']:checked"); 
    var correct = "<span class='validation-hint correct'>Correct!</span>"; 
    var incorrect = "<span class='validation-hint incorrect'>Incorrect!</span>"; 

    if(checked.length > 0){ 

    // Remove all validation hints, if any. 
    $(".validation-hint").remove(); 

    // Show a validation message based on data-validation. 
    checked.each(function(){ 
     if($(this).data("validation")=="1"){ 
     $(this).next("label").after(correct); 
     }else{ 
     $(this).next("label").after(incorrect); 
     } 
    }) 
    } 
}); 

// Reset button also remove the validation messages. 
$("[type='reset']").on("click",function(){ 
    // Remove all validation hints 
    $(".validation-hint").remove(); 
});

CodePen

来源

2017-06-21 20:54:03

jQuery追加邮件到每个标签

回答

相关问题