Question

我是编程新手，我的任务是创建一个可点击的锦标赛支架。 8个团队，您可以在那里挑选将进入下一轮的获胜者。

我遇到的问题是当一个人想要在填写括号后的第一轮或第二轮中修改选秀权时。

例如，在第一轮中，用户选择：

Team1 v.Team8 - ＆gt; <1移动
Team4 v.Team5 - ＆gt; <4移动
Team3 v.Team6 - ＆gt; <3移动
Team2 v.Team7 - ＆gt; <2移动

在第二轮比赛中，我们选择：

Team1 v.Team4 - ＆gt; <1移动
Team2 v.Team3 - ＆gt; <2移动

在总决赛中，他们选择：

Team1 v.Team2 - ＆gt; ＃1获胜。

然后，让我们说用户改变主意并选择Team8在第一轮中打乱Team1。现在，代码仍然会将Team1显示为赢家和最终游戏。如何删除当前显示Team1的未来回合的文本？

在此处附加JSFiddle：https://jsfiddle.net/a4hya2c7/5/或参见下面的代码：

<!DOCTYPE html>
<html>
   <head>
      <title>Button</title>
   </head>
   <body>
      <p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" onclick="changeText(this.value);"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" onclick="changeText(this.value);"><label id="r2">#8</label></br>
         <input type="radio" name="g2" id="i3" value="#4" onclick="changeText2(this.value);"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" onclick="changeText2(this.value);"><label id="r4">#5</label></br>
         <input type="radio" name="g3" id="i5" value="#3" onclick="changeText3(this.value);"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" onclick="changeText3(this.value);"><label id="r6">#6</label></br>
         <input type="radio" name="g4" id="i7" value="#7" onclick="changeText4(this.value);"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" onclick="changeText4(this.value);"><label id="r8">#2</label></br>
      </div>
      </br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" onclick="changeText5(this.value);"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" onclick="changeText5(this.value);"><label id="r10"></label></br>
         <input type="radio" name="g6" id="i11" onclick="changeText6(this.value);"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" onclick="changeText6(this.value);"><label id="r12"></label></br>
      </div>
      </br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" onclick="changeText7(this.value);"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" onclick="changeText7(this.value);"><label id="r14"></label></br>
      </div>
      </br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label></br>
      </div>
      </br>
   </body>
</html>

JS：

function changeText(value) {
    document.getElementById('r9').innerHTML = value;
    document.getElementById('i9').value = value;
}

function changeText2(value) {
    document.getElementById('r10').innerHTML = value;
    document.getElementById('i10').value = value;
}

function changeText3(value) {
    document.getElementById('r11').innerHTML = value;
    document.getElementById('i11').value = value;
}

function changeText4(value) {
    document.getElementById('r12').innerHTML = value;
    document.getElementById('i12').value = value;
}

function changeText5(value) {
    document.getElementById('r13').innerHTML = value;
    document.getElementById('i13').value = value;
}

function changeText6(value) {
    document.getElementById('r14').innerHTML = value;
    document.getElementById('i14').value = value;
}
function changeText7(value) {
    document.getElementById('r15').innerHTML = value;
    document.getElementById('r15').value = value;
}

Answer 1

首先，您的<br>代码不正确，如您所见：

</div>
</br>

您正在使用没有开口的close标签。您可以使用：

<br/>

或使用较新的html5自闭标签样式：

<br>

对于JS本身，如果使用属性，可以简化它，类似于您已经使用的name指向它必须放置值的位置。通过这种改变，代码将变得更小更简单：

const inputs = document.querySelectorAll("input[type=radio]"); 

for (let inp of inputs){
  inp.addEventListener("change", function(){
    let targetLabel = document.getElementById(inp.dataset.target);    
    targetLabel.previousSibling.value = inp.value;
    targetLabel.innerHTML = inp.value;    
  });
}

<p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
         <input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
         <input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
         <input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
      </div>
      <br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
         <input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
      </div>
      <br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
      </div>
      <br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label><br>
      </div>
      <br>

请注意，我设置的目标直接指向标签：

<input type="radio" ... data-target="r9">

然后到达使用previousSibling的相应无线电。

我使用了一些您可能不知道的功能：

querySelectorAll - 获取与传递的选择器匹配的元素数组
for ... of迭代querySelectorAll
addEventListener - 直接在Javascript上设置事件处理程序并使代码更清晰

只需使用Javascript这些小行就可以获得相同的功能，最重要的是，没有代码重复。

现在，如果您想将第一个无线电的更改级联到较低的无线电，您可以直接使用以下命令调用更改事件：

const event = new Event('change');
element.dispatchEvent(event);

每当您看到目标元素已经设置了值时。这就像递归调用一样：

const inputs = document.querySelectorAll("input[type=radio]"); 

for (let inp of inputs){
  inp.addEventListener("change", function(){
    let targetLabel = document.getElementById(inp.dataset.target);
    let targetRadio = targetLabel.previousSibling;
    targetRadio.value = inp.value;
    targetLabel.innerHTML = inp.value;
	
    //if this isn't the last and it's checked, to not cascade non selected radios
    if (targetRadio.hasAttribute && targetRadio.checked){ 
      const nextTargetLabel = document.getElementById(targetRadio.dataset.target);

      if (nextTargetLabel.innerHTML != ''){ //if it has a value then cascade
          targetRadio.dispatchEvent(new Event('change'));
      }
    }
  });
}

<p>First Round</p>
      <div id="round1">
         <input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
         <input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
         <input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
         <input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
         <input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
         <input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
         <input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
         <input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
      </div>
      <br>
      <p>Second Round</p>
      <div id="round2">
         <input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
         <input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
         <input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
         <input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
      </div>
      <br>
      <p>Finals</p>
      <div id="round3">
         <input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
         <input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
      </div>
      <br>
      <p>Winner</p>
      <div id="round4">
         <label value="#8" id="r15"></label><br>
      </div>
      <br>

修改：

要清除以下无线电而不是级联值，您可以使用while，并使用targets导航，直至到达终点：

const inputs = document.querySelectorAll("input[type=radio]"); for (let inp of inputs){ inp.addEventListener("change", function(){ let targetLabel = document.getElementById(inp.dataset.target); let targetRadio = targetLabel.previousSibling; targetLabel.innerHTML = inp.value; targetRadio.value = inp.value; //while there is a next target clear it while (targetLabel.previousSibling.hasAttribute){ targetLabel = document.getElementById(targetRadio.dataset.target); targetRadio = targetLabel.previousSibling; targetRadio.checked = false; targetLabel.innerHTML = ''; } }); }

<p>First Round</p> <div id="round1"> <input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label> <input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br> <input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label> <input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br> <input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label> <input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br> <input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label> <input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br> </div> <br> <p>Second Round</p> <div id="round2"> <input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label> <input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br> <input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label> <input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br> </div> <br> <p>Finals</p> <div id="round3"> <input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label> <input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br> </div> <br> <p>Winner</p> <div id="round4"> <label value="#8" id="r15"></label><br> </div> <br>

如何在Javascript中级联单选按钮？

1 个答案: