選擇/突出顯示行並更改同一行中突出顯示的文本字段的值

Question

長期偷竊者，首次張貼。

我正在嘗試創建一個具有特定功能的，基於Internet的交互式GUI，該功能模仿我一個客戶的產品的控制面板，但是運氣不高，無法完全按照我的要求進行操作。 我知道答案就在那里。 我將盡我所能描述我要實現的目標，而不會太冗長。 不過，確實，檢查出叉子才是最好的解釋。

我想做的是能夠使用戶選擇一個顯示器上的行-在這種情況下，“顯示器”被呈現為無序列表-通過使用html / css按鈕。 除此之外，我希望它們能夠增加和減少文本框中的值。 這是一個關鍵點：我希望它們僅在文本框突出顯示時才能夠增加和減少值。 我遇到的問題是我無法讓每個文本框都增加或減少。 我只能讓第一個改變。 希望說明已經很清楚了，但是請查看Plunker以獲得最佳理解。 當您看到它時，它將更加清晰。

我為此做了許多不同的草稿/版本，並嘗試使用表格，但這使我最接近。 現在我只需要克服困難。 我完全願意以不同的方式進行此操作，但似乎只需要在此處或此處進行調整即可使其開始。 創建此帖子時，我有一個想法，該想法可能會起作用，並且不涉及無序列表或列表項，並且會以“創意”作為邊距和邊距來執行突出顯示。 我還沒有嘗試過。

我嘗試在jsfiddle上進行設置，但是編寫代碼的方式與他們的軟件不兼容，因此我嘗試了Plunker，它似乎可以工作。 無論哪種方式，這里都是小提琴： http : //jsfiddle.net/brettroby/f5jrL/ ，而這里是Plunker： http ://plnkr.co/edit/BMSh19?p=preview。 如果有人想在那把提琴上工作，並讓我知道為什么它不起作用，那將不勝感激。 但是，Plunker仍然可以正常工作。

我還有一個較小的問題，待主要問題解決后再討論。

感謝大家的幫助！

PS-感謝那里的所有代碼編寫者，我借用了他們的代碼以達到目標。 我會死在水中而沒有stackoverflow。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>

<style type="text/css">

#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}

#screen-container {
float: left;
background: #6799ea;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
}

#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}

ul {
margin: 20px 10px 0 -30px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 1.5em;
}

li {
list-style-type: none;
line-height: 50px;
}

li:selected {
color: #000;
}

#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}

#up, #down, #left, #right {
text-align: center;
}

#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}

#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}

#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}

.number-input {
float: right;
width: 50px;
font-size: 1.5em;
text-align: right;
color: #ffffff;
background-color: 6799ea;
border: 0px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}

</style>

<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429

var SBoxPtr = 0;
function SBoxPrevNext(amt) {
  var sel = document.getElementById('screen-container').getElementsByTagName('li');
  SBoxPtr += amt;
  if (SBoxPtr < 0) { SBoxPtr = 0; }
  if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
  for (var i=0; i<sel.length; i++) {
    if (i == SBoxPtr) { sel[i].style.backgroundColor = 'cyan'; }
                 else { sel[i].style.backgroundColor = '6799ea'; }
  }
}
document.onkeyup = changeChars;


function changeChars(e) {
  var KeyID = (window.event) ? event.keyCode : e.keyCode;   //  alert(KeyID);
  if (KeyID == 187) { SBoxPrevNext(1); }    // Key '+'
  if (KeyID == 189) { SBoxPrevNext(-1); }   // Key '-'
  if (KeyID == 40) { SBoxPrevNext(1); }     // Key 'DownArrow'
  if (KeyID == 38) { SBoxPrevNext(-1); }    // Key 'UpArrow'
}

window.onload=function(){
SBoxPrevNext(0)
 document.getElementById("up").onclick=function(){SBoxPrevNext(-1)}
 document.getElementById("down").onclick=function(){SBoxPrevNext(1)}
}

</script>

<script type="text/javascript">
function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}
</script>

<script type="text/javascript">
function decrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    document.getElementById('number').value = value;
}
</script>

</head>
<body>

<div id="wrapper">

<div id="screen-container">
<ul>
<li>Program Line 1 <input class="number-input" type="number" min="0" max="80" value="0" id="number"></li>
<li>Program Line 2 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 3 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 4 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 5 <input class="number-input" type="number" min="0" max="80" value="0" ></li>
</ul>
</div>

<div id="d-pad">
<div id="up"><p>&#9650</div><div id="down"><p>&#9660</div>
<div id="left" onclick="decrementValue()"><p style="">&#9668;</p></div><div id="right" onclick="incrementValue()"><p>&#9658;</div>
</div>

</div><!-- end wrapper -->

</body>
</html>

Answer 1

我已設法修復您的代碼，您可以在此處看到正確的插件

我所做的更正是

代替：

function incrementValue()
{
   var value = parseInt(document.getElementById('number').value, 10);
   value = isNaN(value) ? 0 : value;
   value++;
   document.getElementById('number').value = value;
}

我已將其修復為：

function incrementValue()
{
   var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
   value = isNaN(value) ? 0 : value;
   value++;
   document.getElementById('number'+ SBoxPtr).value = value;
}

並將元素名稱從number更改為numberX

原版的

<li>Program Line 1
<input id="number" class="number-input" type="number" min="0" max="80" value="0" ></li>

固定：

 <li>Program Line 1 
 <input id="number0" class="number-input" type="number" min="0" max="80" value="0" </li>

添加id = number0並編號所有其他li

如果您發現我的答案有幫助，請對其進行標記，並同時按UP鍵。 謝謝

選擇/突出顯示行並更改同一行中突出顯示的文本字段的值

問題描述

1 個解決方案

解決方案1
0 已采納 2013-09-24 06:25:38

選擇/突出顯示行並更改同一行中突出顯示的文本字段的值

問題描述

1 個解決方案

解決方案1 0 已采納 2013-09-24 06:25:38

解決方案1
0 已采納 2013-09-24 06:25:38