Question

这是尝试显示使用vanilla JS选择的输入字段，可以想到改变背景颜色。

作为初学者，我不知道我是否正在做最好的结构。但对我来说听起来更容易，在我的个人项目中会有更多的领域。

现在我只需要让函数一次保持一种颜色而不是一次选择所有颜色。我使用条件语句和子函数做了很多尝试但到目前为止没有成功。

pointer/selector image for index JS fiddle

var sel = document.querySelectorAll("input.arr");
var rcvVal = document.getElementById("ini");
var ini = document.getElementById("ini");
var arrLength = document.getElementsByClassName("arr");

ini.addEventListener("click", selector, true);

function selector() {
  var current = rcvVal.value - 1; //-1 for position 0
  if (rcvVal.value - 1 == current) {
    sel[rcvVal.value - 1].style.background = "#0D0";
    }else{
      for (var i = 0; i <= arrLength.length; i++) {
        sel[i].style.background = "lightblue";//go back to page previous/default color
      }
 }
  document.getElementById("demo").innerHTML = "position: " + rcvVal.value + "/"+arrLength.length;
  //check position/length
}

selector(); //First run

input {
  width: 50px;
  background: lightblue;
  /*default color*/
  border-style: none;
  opacity: 1;
}

input[type=number]::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  opacity: 1;
    padding:3px 3px;  
}

Move one green color among input fields <br>
<input style=background:#E70; type="number" value="3" id="ini" class="first" min="1" max="5"> Selector
<br>
<br>
<input type="number" value="10" class="arr">
<input type="number" value="20" class="arr">
<input type="number" value="30" class="arr">
<input type="number" value="40" class="arr">
<input type="number" value="50" class="arr">

<p id="demo"></p>

Answer 1

这是因为您设置了current = rcvVal.value - 1，然后立即检查current是否等于rcvVal.value - 1。当然，这总是正确的，所以永远不会到达重置else子句中颜色的循环。

您应该删除if / else语句，而只是运行循环以清除所有颜色，然后设置绿色。

Answer 2

您的if语句将始终导致执行相同的块，因为您将current设置为rcvVal.value - 1，然后检查current现在是rcvVal.value - 1。

您可以这样简化：

  var current = rcvVal.value - 1; //-1 for position 0

  // Iterate all of input.arr
  sel.forEach((node, index) => {

    // Check if current corresponds to the index
    // of the input.arr elements array
    if (index == current) node.style.background = "#0D0";

    else node.style.background = "lightblue";
  })

＆＃13;

var sel = document.querySelectorAll("input.arr");
var rcvVal = document.getElementById("ini");
var ini = document.getElementById("ini");
var arrLength = document.getElementsByClassName("arr");

ini.addEventListener("click", selector, true);

function selector() {
  var current = rcvVal.value - 1; //-1 for position 0
  sel.forEach((node, index) => {
    if (index == current) node.style.background = "#0D0";
    else node.style.background = "lightblue";
  })
document.getElementById("demo").innerHTML = "position: " + rcvVal.value + "/" + arrLength.length;
//check position/length
}

selector(); //First run

＆＃13;

input {
  width: 50px;
  background: lightblue;
  /*default color*/
  border-style: none;
  opacity: 1;
}

input[type=number]::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  opacity: 1;
  padding: 3px 3px;
}

＆＃13;

Move one green color among input fields <br>
<input style=background:#E70; type="number" value="3" id="ini" class="first" min="1" max="5"> Selector
<br>
<br>
<input type="number" value="10" class="arr">
<input type="number" value="20" class="arr">
<input type="number" value="30" class="arr">
<input type="number" value="40" class="arr">
<input type="number" value="50" class="arr">

<p id="demo"></p>

＆＃13;

Answer 3

您可以使用.arr从使用rcvVal.value - 1创建的数组中排除.splice()索引.slice()，将数组background的元素设置为"lightblue" }

＆＃13;

var sel = document.querySelectorAll("input.arr");
var rcvVal = document.getElementById("ini");
var arrLength = document.getElementsByClassName("arr");

ini.addEventListener("click", selector, true);

function selector() {
  var current = rcvVal.value - 1; //-1 for position 0
    sel[rcvVal.value - 1].style.background = "#0D0";
    var not = Array.prototype.slice.call(document.querySelectorAll(".arr"));
    not.splice(rcvVal.value - 1, 1);
    not.forEach(function(el) {
      el.style.background = "lightblue";
    })
 
  document.getElementById("demo").innerHTML = "position: " + rcvVal.value + "/" + arrLength.length;
  //check position/length
}

selector(); //First run

＆＃13;

input {
  width: 50px;
  background: lightblue;
  /*default color*/
  border-style: none;
  opacity: 1;
}

input[type=number]::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  opacity: 1;
  padding: 3px 3px;
}

＆＃13;

Move one green color among input fields <br>
<input style=background:#E70; type="number" value="3" id="ini" class="first" min="1" max="5"> Selector
<br>
<br>
<input type="number" value="10" class="arr">
<input type="number" value="20" class="arr">
<input type="number" value="30" class="arr">
<input type="number" value="40" class="arr">
<input type="number" value="50" class="arr">

<p id="demo"></p>

＆＃13;

Answer 4

另一种方式，没有检查条件

＆＃13;

var ini = document.getElementById("ini");
var arr = document.getElementsByClassName("arr");

ini.addEventListener("click", selector, true);

function selector() {
  for (var i = 0; i < arr.length; i++) {
    arr[i].style.background = "lightblue"; //go back to page previous/default color
  }
  arr[ini.value - 1].style.background = "#0D0";
  document.getElementById("demo").innerHTML = "position: " + ini.value + "/" + arr.length;
  //check position/length
}

selector(); //First run

＆＃13;

input {
  width: 50px;
  background: lightblue;
  /*default color*/
  border-style: none;
  opacity: 1;
}

input[type=number]::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  opacity: 1;
  padding: 3px 3px;
}

＆＃13;

<br>
<input style=background:#E70; type="number" value="3" id="ini" class="first" min="1" max="5"> Selector
<br>
<br>
<input type="number" value="10" class="arr">
<input type="number" value="20" class="arr">
<input type="number" value="30" class="arr">
<input type="number" value="40" class="arr">
<input type="number" value="50" class="arr">

<p id="demo"></p>

＆＃13;

为什么输入数字不会“移动”颜色？

4 个答案: