Question

我需要用户输入值来调整用户可用/可见的按钮数量以供选择。

我假设由于每个按钮都有一个唯一的值，因此我可以运行某种JavaScript if...else <=函数并在display: none和display: block之间切换，但是我尝试过的所有操作均未能做到这一点点。

<body>
  <div><input type="text" id="runners" />Select No. of runners</div>
  <br /><br />
  <div id="runner1"><button class="open-button btn1" onclick="openForm()" style="display:block;">1</button></div>
  <div id="runner2"><button class="open-button btn2" onclick="openForm()" style="display:block;">2</button></div>
  <div id="runner3"><button class="open-button btn3" onclick="openForm()" style="display:block;">3</button></div>
  <div id="runner4"><button class="open-button btn4" onclick="openForm()" style="display:block;">4</button></div>
  <div id="runner5"><button class="open-button btn5" onclick="openForm()" style="display:block;">5</button></div>
  <div id="runner6"><button class="open-button btn6" onclick="openForm()" style="display:block;">6</button></div>
  <div id="runner7"><button class="open-button btn7" onclick="openForm()" style="display:block;">7</button></div>
  <div id="runner8"><button class="open-button btn8" onclick="openForm()" style="display:block;">8</button></div>
  <div id="runner9"><button class="open-button btn9" onclick="openForm()" style="display:block;">9</button></div>
  <div id="runner10"><button class="open-button btn10" onclick="openForm()" style="display:block;">10</button></div>
</body>

因此，如果用户输入“ 6”作为跑步人数，那么我只需要显示6个按钮即可。

Answer 1

将输入框分配给变量，例如val。
从10个按钮中检索每个数字，并将它们全部分配给一个变量，例如runners。
使用parseInt()将变量val和runners上检索到的字符串数字转换为整数。
将runners变量中每个数字的解析值与val的解析值进行比较，并根据条件结果，相应地设置css display属性。 / p>

NB 您应该避免使用内联on-* handlers（onclick，oninput等），而应使用事件监听器。

检查以下代码段，以获取上述内容的实际示例：

/* JavaScript */
var btn = document.getElementById("btn");
var val = document.getElementById("runners");

function toggleRunners() {
    var runners = document.querySelectorAll('div[id*="runner"]'); // 'div[id*="runner"]' basically means all div elements whose "id" attribute values has "runner" in them
    
    runners.forEach(runner => {
        var value = parseInt(val.value);
        var run = parseInt(runner.innerText);
        if (run === value || run < value) {
        	runner.style.display = "block";
        } else {
        	runner.style.display = "none";
        }
    })
}
btn.addEventListener("click", toggleRunners);

  
  <!-- HTML -->
  <div>
  <input type="text" id="runners">Select No. of runners
  <hr />
  <button id="btn">Click Me</button>
  </div>
  <hr />
  <div id="runner1"><button class="open-button btn1" style="display:block;">1</button></div>
  <div id="runner2"><button class="open-button btn2" style="display:block;">2</button></div>
  <div id="runner3"><button class="open-button btn3" style="display:block;">3</button></div>
  <div id="runner4"><button class="open-button btn4" style="display:block;">4</button></div>
  <div id="runner5"><button class="open-button btn5" style="display:block;">5</button></div>
  <div id="runner6"><button class="open-button btn6" style="display:block;">6</button></div>
  <div id="runner7"><button class="open-button btn7" style="display:block;">7</button></div>
  <div id="runner8"><button class="open-button btn8" style="display:block;">8</button></div>
  <div id="runner9"><button class="open-button btn9" style="display:block;">9</button></div>
  <div id="runner10"><button class="open-button btn10" style="display:block;">10</button></div>

Answer 2

这应该做到：

function updateRunners(el) {
  let runners = document.querySelector('#runners');
  runners.innerHTML = '';
  for (let i = 1; i < Math.min(Number(el.value) + 1, Number(el.max) + 1); i++) {
    let button = document.createElement('button');
    button.id = 'runner-' + i;
    button.innerText = i;
    button.setAttribute('onclick', "openForm(this.innerText)");
    runners.appendChild(button);
  }
}

function openForm(i) {
  console.log('openForm() was called from ' + i);
}

updateRunners(document.querySelector('#runControl'));

#runners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<input id="runControl"
       type="number"
       value="5" 
       min="0" 
       max="10"
       oninput="updateRunners(event.target)">
<hr>
<div id="runners"></div>

很明显，您可以将它们放置在<div>内，但我认为没有必要，因为CSS可以用于在彼此之间显示它们而无需额外的标记。

Answer 3

只需将此函数添加到输入
<input type="text" id="runners" oninput="checkNumber(this.value)"/>
并在脚本标签中添加以下功能简洁大方

function checkNumber(val){
      var elements = document.getElementsByClassName("open-button");
      for(var i = 0; i < elements.length; i++){
        elements[i].style.display = "block";
      }
      if (val != null) {
        while (val < 10) {
          val++;
          var class_name = '.btn' + val;
          if (document.querySelector(class_name) !== null) {
            document.querySelector(class_name).style.display = 'none';
          }
        }
      }
    }
  function openForm() {
    console.log('openForm() was called');
  }

<body>
  <div><input type="text" id="runners" oninput="checkNumber(this.value)"/>Select No. of runners</div>
  <br /><br />
  <div id="runner1"><button class="open-button btn1" onclick="openForm()" style="display:block;">1</button></div>
  <div id="runner2"><button class="open-button btn2" onclick="openForm()" style="display:block;">2</button></div>
  <div id="runner3"><button class="open-button btn3" onclick="openForm()" style="display:block;">3</button></div>
  <div id="runner4"><button class="open-button btn4" onclick="openForm()" style="display:block;">4</button></div>
  <div id="runner5"><button class="open-button btn5" onclick="openForm()" style="display:block;">5</button></div>
  <div id="runner6"><button class="open-button btn6" onclick="openForm()" style="display:block;">6</button></div>
  <div id="runner7"><button class="open-button btn7" onclick="openForm()" style="display:block;">7</button></div>
  <div id="runner8"><button class="open-button btn8" onclick="openForm()" style="display:block;">8</button></div>
  <div id="runner9"><button class="open-button btn9" onclick="openForm()" style="display:block;">9</button></div>
  <div id="runner10"><button class="open-button btn10" onclick="openForm()" style="display:block;">10</button></div>
</body>

Answer 4

您可以通过以下方式手动执行此操作：

if (#runner1) {
    then runner2,3,4,5,6... would have display: none
}

if (#runner2) {
    then runner3,4,5,6... would have display: none
}

不是语法，而是使用JavaScript的函数逻辑

Answer 5

检查一下，我用jQuery完成了 https://jsfiddle.net/emeka247/x5sk2gh8/4/ html

<div>
   <input type="text" id="runners">Select No. of runners
</div>
<br><br>
<div id="runner1">
   <button class="open-button btn1" onclick="openForm()" style="display:none;">1</button>
</div>
<div id="runner2">
   <button class="open-button btn2" onclick="openForm()" style="display:none;">2</button>
</div>
<div id="runner3">
   <button class="open-button btn3" onclick="openForm()" style="display:none;">3</button>
</div>
<div id="runner4">
   <button class="open-button btn4" onclick="openForm()" style="display:none;">4</button>
</div>
<div id="runner5">
   <button class="open-button btn5" onclick="openForm()" style="display:none;">5</button>
</div>
<div id="runner6">
   <button class="open-button btn6" onclick="openForm()" style="display:none;">6</button>
</div>
<div id="runner7">
   <button class="open-button btn7" onclick="openForm()" style="display:none;">7</button>
</div>
<div id="runner8">
   <button class="open-button btn8" onclick="openForm()" style="display:none;">8</button>
</div>
<div id="runner9">
   <button class="open-button btn9" onclick="openForm()" style="display:none;">9</button>
</div>
<div id="runner10">
   <button class="open-button btn10" onclick="openForm()" style="display:none;">10</button>
</div>

这里的jQuery

$(document).ready(function(){
$(document).on('keyup','#runners',function(){
$input=$('#runners').val();
if($input==1){
$('.btn1').css('display','block');
$('.btn2,.btn3, .bt4, .btn5, .btn6, .btn7').css('display','none');
}else if($input==2){
$('.btn1, .btn2').css('display','block');
$('.btn3, .btn4, .btn5, .btn6, .btn7').css('display','none');
}else if($input==3){
$('.btn1, .btn2, .btn3').css('display','block');
$('.btn4, .btn5, .btn6, .btn7').css('display','none');
}else if($input==4){
$('.btn1, .btn2, .btn3, .btn4').css('display','block');
$('.btn5, .btn6, .btn7').css('display','none');
}else if($input==5){
$('.btn1, .btn2, .btn3, .btn4, .btn5').css('display','block');
$( '.btn6, .btn7').css('display','none');
}else if($input==6){
$('.btn1, .btn2, .btn3, .btn4, .btn5, .btn6').css('display','block');
$(' .btn7').css('display','none');
}
});
});

HTML输入字段值，用于更改用户可见的按钮数

5 个答案: