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追加郵件到每個標籤

回答

相關問題