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>

我想更换＆＃34;已回答（0）＆＃34;，＆＃34;已回答（1）＆＃34;，＆＃34;已回答（2）＆＃34;与＃34;回答（类= =＆＃39;回答＆＃39;在此元素之前）＆＃34;因此，当元素移动或插入时，编号不必重做。

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标签移到了跨距内，并使用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)">

如果你想使用＆＃39;这个＆＃39;代替：

<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执行此操作 - 在每次输入更改后检查所有答案并相应地更改背景

$(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

如何传递元素前面的类总数？

3 个答案: