要素の前にあるクラスの総数を渡すには？ここ

Question

は、私が現在やっているものです：

<script> 
function Answered(str) { 
    var script = document.getElementsByClassName('Answered')[str]; 
    if(script!==null) {script.setAttribute("style", "");} 
} 
</script> 

<span class=Answered style="background-color: #FFBED1">Is the sky blue?</span><br> 
<select name="SkyBlue" onchange="Answered(0)"> 
    <option value="">Please Select</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option> 
</select><br> 
<br> 

<span class=Answered style="background-color: #FFBED1">How old are you?</span><br> 
<input name=Age onchange="Answered(1)"><br> 
<br> 

<span class=Answered style="background-color: #FFBED1">Is grass green?</span><br> 
<select name="GrassGreen" onchange="Answered(2)"> 
    <option value="">Please Select</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option> 
</select><br> 

私は交換したい "（0）回答"、 "（1）回答"、「回答（クラスのようなもので、 "（2）回答" == 'この要素に先行して回答しました'） "要素が移動または挿入されると、番号付けをやり直す必要はありません。

Answer 1

更新済み！

私はコメントが分かりましたので、以前の回答にはいくつかのバグがありました。そこで、ここではDOMツリーの実際の要素を探すように更新されました。

代わりthis渡す：

function Answered(el) { 
 
    var isSpan = el.previousElementSibling; 
 
    var elem = checkPrev(el); 
 
    if (el.value === "") { 
 
    return false; 
 
    } 
 
    if (isSpan.nodeName === "SPAN") { 
 
    isSpan.setAttribute("style", ""); 
 
    } 
 

 
    function checkPrev(currElem) { 
 
    if (currElem.previousElementSibling.nodeName !== 'SPAN') { 
 
     Answered(currElem.previousElementSibling) 
 
    } else { 
 
     return currElem.previousElementSibling; 
 
    } 
 
    } 
 
}

<span class=Answered style="background-color: #FFBED1">Is the sky blue?</span> 
 
<br> 
 
<select name="SkyBlue" onchange="Answered(this)"> 
 
    <option value="">Please Select</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No">No</option> 
 
</select> 
 
<br> 
 
<br> 
 

 
<span class=Answered style="background-color: #FFBED1">How old are you?</span> 
 
<br> 
 
<input name=Age onchange="Answered(this)"> 
 
<br> 
 
<br> 
 

 
<span class=Answered style="background-color: #FFBED1">Is grass green?</span> 
 
<br> 
 
<select name="GrassGreen" onchange="Answered(this)"> 
 
    <option value="">Please Select</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No">No</option> 
 
</select> 
 
<br>

Fiddle

Answer 2

をここに私がやってしまったものです：

<script> 
function Answered(str) { 
var span = document.getElementsByName(str)[0].previousElementSibling; 
span.setAttribute("style", ""); 
} 
</script> 

<span class=Answered style="background-color: #FFBED1">Is the sky blue?<br></span> 
<select name="SkyBlue" onchange="Answered(this.name)"> 
<option value="">Please Select</option> 
<option value="Yes">Yes</option> 
<option value="No">No</option> 
</select><br> 
<br> 
<span class=Answered style="background-color: #FFBED1">How old are you?<br></span> 
<input name=Age onchange="Answered(this.name)"><br> 
<br> 
<span class=Answered style="background-color: #FFBED1">Is grass green?<br></span> 
<select name="GrassGreen" onchange="Answered(this.name)"> 
<option value="">Please Select</option> 
<option value="Yes">Yes</option> 
<option value="No">No</option> 
</select><br> 

私は内側にあることをBRタグを移動spansを使用してthis.nameを使用して、idを追加することなく要素を識別しました。

は編集：

function Answered(str,value) { 
var span = document.getElementsByName(str)[0].previousElementSibling; 
span.setAttribute("style", ""); 
if(value.length<1) {span.style.backgroundColor="#FFBED1";} 
} 

と関数の呼び出し：：

<select name="SkyBlue" onchange="Answered(this.name,this.value)"> 

とあなたの代わりに「はこの」を使用したい場合は、誰かが誰かが質問をunanswers場合は何をすべきかを尋ねたので：

<script> 
function Answered(element) { 
element.previousElementSibling.setAttribute("style", ""); 
if(element.value.length<1) {element.previousElementSibling.style.backgroundColor="#FFBED1";} 
} 
</script> 

<span class=Answered style="background-color: #FFBED1">Is the sky blue?<br></span> 
<select name="SkyBlue" onchange="Answered(this)"> 
<option value="">Please Select</option> 
<option value="Yes">Yes</option> 
<option value="No">No</option> 
</select><br> 
<br> 
<span class=Answered style="background-color: #FFBED1">How old are you?<br></span> 
<input name=Age onchange="Answered(this)"><br> 
<br> 
<span class=Answered style="background-color: #FFBED1">Is grass green?<br></span> 
<select name="GrassGreen" onchange="Answered(this)"> 
<option value="">Please Select</option> 
<option value="Yes">Yes</option> 
<option value="No">No</option> 
</select><br> 

Answer 3

jQueryで行うことができます - 各入力が変更され、バックグラウンドND応じ

$(function() { 
    $(':input').on('change', function() { // on any input changed 
    $('.Answered') 
     .css('background-color','#FFBED1') // change color to red 
     .filter(function(){ // filter out spans that have inputs with a value 
      return $.trim($(this).nextAll(':input:first').val()) !== ''; 
      // I trimmed the value to account for blank answers 
     }).css('background-color',''); // remove background color from spans with answers 
    }); 
}); 

FIDDLE