Question

我希望能够选择一个输入框，然后触发输入框。我不知道如何使用javascript。

例如，如果用户只按下第一个框，则该框应该处于活动状态，但如果用户按下第二个框，则应触发第一个和第二个框。

下面的代码段显示我可以同时激活一个方框，但我希望能够触发前面的方框，而无需在选择第二个，第三个和最后一个方框后手动执行此操作。

＆＃13;

function color(campo) {
  valor_campo = document.getElementById(campo).value;
  if (valor_campo == 0) {
    document.getElementById(campo).style.background = '#000';
    document.getElementById(campo).style.color = '#000';
    document.getElementById(campo).value = 1;
  } else if (valor_campo == 1) {
    document.getElementById(campo).style.background = '#fff';
    document.getElementById(campo).style.color = '#fff';
    document.getElementById(campo).value = 0;
  }
}

function colors() {

  if (document.getElementById('cc11_a').value == 0) {
    document.getElementById('cc11_a').style.background = '#fff';
    document.getElementById('cc11_a').style.color = '#fff';
    document.getElementById('cc11_a').value = 0;
  } else if (document.getElementById('cc11_a').value == 1) {
    document.getElementById('cc11_a').style.background = '#000';
    document.getElementById('cc11_a').style.color = '#000';
    document.getElementById('cc11_a').value = 1;
  }

  if (document.getElementById('cc11_b').value == 0) {
    document.getElementById('cc11_b').style.background = '#fff';
    document.getElementById('cc11_b').style.color = '#fff';
    document.getElementById('cc11_b').value = 0;
  } else if (document.getElementById('cc11_b').value == 1) {
    document.getElementById('cc11_b').style.background = '#000';
    document.getElementById('cc11_b').style.color = '#000';
    document.getElementById('cc11_b').value = 1;
  }

  if (document.getElementById('cc11_c').value == 0) {
    document.getElementById('cc11_c').style.background = '#fff';
    document.getElementById('cc11_c').style.color = '#fff';
    document.getElementById('cc11_c').value = 0;
  } else if (document.getElementById('cc11_c').value == 1) {
    document.getElementById('cc11_c').style.background = '#000';
    document.getElementById('cc11_c').style.color = '#000';
    document.getElementById('cc11_c').value = 1;
  }

  if (document.getElementById('cc11_d').value == 0) {
    document.getElementById('cc11_d').style.background = '#fff';
    document.getElementById('cc11_d').style.color = '#fff';
    document.getElementById('cc11_').value = 0;
  } else if (document.getElementById('cc11_d').value == 1) {
    document.getElementById('cc11_d').style.background = '#000';
    document.getElementById('cc11_d').style.color = '#000';
    document.getElementById('cc11_d').value = 1;
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="colors();">
  <td colspan="3" style="text-align:left">

    <input name="cc11_a" type="text" class="text" id="cc11_a" onclick="color(this.id);" style="width:0.3cm;" value="" />
    <input name="cc11_b" type="text" class="text" id="cc11_b" onclick="color(this.id);" style="width:0.3cm;" value="" />
    <input name="cc11_c" type="text" class="text" id="cc11_c" onclick="color(this.id);" style="width:0.3cm;" value="" />
    <input name="cc11_d" type="text" class="text" id="cc11_d" onclick="color(this.id);" style="width:0.3cm;" value="" />

  </td>

＆＃13;

Answer 1

我简化了您的代码并提供了解决方案。

color函数首先从id中提取元素的编号，即

'cc11_a'变为0
'cc11_b'变为1
等

然后从该数字循环回到0，即如果数字是2，则它循环遍历2，1和0。对于这些数字中的每一个，它都会调用toggleElmt函数。

toggleElmt函数首先将数字转换回id，例如2变为'cc11_c'并检索具有该ID的元素。然后它获取该元素的value，使用它来更改其背景和文本的颜色。最后，它使用了一种经过验证的方法来切换0到1之间的数字，基本上可以简化为someValue = 1 - someValue。

＆＃13;

var twoColors = ['#000', '#fff'];

function color(campoId) {
  var campoNum = campoId.charCodeAt(campoId.length - 1);
  for (var num = campoNum; num >= 97; num -= 1) {
    toggleElmt(num);
  }
}

function toggleElmt(num) {
  var campoElmt = document.getElementById('cc11_' + String.fromCharCode(num));
  var valor_campo = campoElmt.value;
  campoElmt.style.background = twoColors[valor_campo];
  campoElmt.style.color = twoColors[valor_campo];
  campoElmt.value = 1 - valor_campo;
}

＆＃13;

input {
  width: 0.3cm;
  background: white;
  color: white;
}

＆＃13;

<input id="cc11_a" onclick="color(this.id);" value="0" />
<input id="cc11_b" onclick="color(this.id);" value="0" />
<input id="cc11_c" onclick="color(this.id);" value="0" />
<input id="cc11_d" onclick="color(this.id);" value="0" />

＆＃13;

Answer 2

一种可能的方法是使用DOM event delegation。

实施例

HTML：

<div id="parentElem">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS：

#parentElem {
  display: flex;
  flex-direction: row;
}

.box {
  background-color: #fff;
  border: 1px solid black;
  width: 48px;
  height: 48px;
}

使用纯Javascript：

// Grab all input boxes.
var inputBoxes = document.getElementsByClassName('box');
// Turn node list into an array so we can use array methods.
inputBoxes = Array.from(inputBoxes);
// Grab the parent element.
var parentElem = document.getElementById('parentElem');

// Attach onclick event to the parent element.
parentElem.addEventListener('click', function(event) {
  if (event.target.classList.contains('box')) {
    // Briefly reset the color of all boxes.
    inputBoxes.forEach(function(box) {
        box.style.backgroundColor = 'white';
    })
    // Grab the index of the clicked box.
    var indexOfClickedBox = inputBoxes.indexOf(event.target);
    // Turn each box red until you reach the clicked box.
    inputBoxes.forEach(function(box, i) {
        if (i <= indexOfClickedBox)
          box.style.backgroundColor = 'red';
    })
  }
});

JSFiddle：https://jsfiddle.net/9arpknhq/

如何在选定的特定输入框上触发其他输入框

2 个答案:

实施例