文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在选定的特定输入框上触发其他输入框？

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

Stack Overflow用户

提问于 2016-08-28 17:49:40

回答 2查看 85关注 0票数 1

我想要能够选择一个输入框和在它被触发之前的输入框。我不知道如何用javascript来做这件事。

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

代码片段显示，我可以一次激活一个框，但我希望能够触发之前的框，而不必在选择第二个、第三个和最后一个框时手动执行。

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;
  }

}

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

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-28 21:35:31

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

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。

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;
}

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

<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" />

票数 1

Stack Overflow用户

发布于 2016-08-28 21:38:02

一种可能的方法是使用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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39194164

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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