Question

假设我有以下输入字段：

<input id="inputField" type="number" value="">

和一些div如：

<div id="1000"></div>
<div id="1200"></div>
<div id="1500"></div>
<div id="1900"></div>
...

当用户在输入字段中输入数字时，我希望我的代码转到最接近该数字的div id。

例如：如果用户输入1300，则显示id为“1200”的div。

考虑到会有大量的div，在javascript中实现它的最有效方法是什么？

现在我正在做：

<script>
        function myFunction() 
        {
            var x = document.getElementById("inputField").value;

            if(x >= 1750 && x <= 1900) 
            {
                window.location.hash = '#1800';
            }
        }
</script>

Answer 1

如果可以的话，一种方法是将所有带有数字ID的div包装在另一个div中（并给它一些id，比如说＆＃39;数字＆＃39;）;这允许您在javascript文件中找到所有div。

使用Javascript：

// Get all the divs with numbers, if they are children of div, id="numbers"
let children = document.getElementById('numbers').children;

let array = [];
for (i = 0; i < children.length; i++) {
    // Append the integer of the id of every child to an array
    array.push(parseInt(children[i].id));
}

// However you are getting your input number goes here
let number = 1300  // Replace
currentNumber = array[0]
for (const value of array){
    if (Math.abs(number - value) < Math.abs(number - currentNumber)){
        currentNumber = value;
    }
}

// You say you want your code to go to the nearest div,
// I don't know what you mean by go to, but here is the div of the closest number
let target = document.getElementById(currentNumber.toString());

如果有更多我可以添加帮助，请告诉我。

演示

＆＃13;

function closestNum() {

  let children = document.getElementById('numbers').children;

  let array = [];
  for (i = 0; i < children.length; i++) {
    array.push(parseInt(children[i].id));
  }

  let number = document.getElementById('inputnum').value;
  currentNumber = array[0]
  for (const value of array) {
    if (Math.abs(number - value) < Math.abs(number - currentNumber)) {
      currentNumber = value;
    }
  }

  let target = document.getElementById(currentNumber.toString());

  document.getElementById('target').innerHTML = target.innerHTML;
}

＆＃13;

<div id="numbers">
  <div id="1000">1000</div>
  <div id="2000">2000</div>
  <div id="3000">3000</div>
  <div id="4000">4000</div>
  <div id="5000">5000</div>
</div>

<br />
<input type="text" id="inputnum" placeholder="Input Number" onchange="closestNum()" />

<br />
<br /> Target:
<div id="target"></div>

＆＃13;

Answer 2

这可能对你有用。循环遍历每个div并将其与输入的ID进行比较。跟踪最近的一个，隐藏所有div，然后显示最接近的。

document.getElementById("inputField").addEventListener("change", function(){

   var divs = document.getElementsByTagName("div");
   var closestDiv = -1;
   var inputId = document.getElementById("inputField").value;
   for(var i=0; i<divs.length; i++)
   {
      if(Math.abs(inputId - closestDiv) > Math.abs(inputId - divs[i].id) || closestDiv == -1)
      {
         closestDiv = divs[i].id;
         for (var x = 0; x < divs.length; x++) {
            divs[x].style.display = 'none';        
         }
         divs[i].style.display = "block";
      }
    }
});

直播： jsfiddle.net

Answer 3

通过一些优化，这应该没问题 -

var element;
document.addEventListener("change",
function(evt){
if(element && element.classList){
element.classList.remove("selected", false); 
element.classList.add("unselected", true); 

}
var listOfDivs = 
document.querySelectorAll(".unselected");


var val = evt.target.value;

var leastAbs=listOfDivs[0].id;


for(let anIndex=0, len=listOfDivs.length;anIndex<len;anIndex++){
       
       if(Math.abs(listOfDivs[anIndex].id-val)<leastAbs){
       leastAbs = Math.abs(listOfDivs[anIndex].id-val);
       element = listOfDivs[anIndex];
       }
}
element.classList.remove("unselected");
element.classList.add("selected");

});

.selected{
  background-color:red;
}
.unselected{
  background-color:yellow;
}

.unselected, .selected{
  width:100%;
  height:50px;
}

<input id="inputField" type="number" value="">


<div id="1000" class='unselected'>1</div>
<div id="1200" class='unselected'>2</div>
<div id="1500" class='unselected'>3</div>
<div id="1900" class='unselected'>4</div>

如何显示给定输入数字的最近div ID？

3 个答案:

使用Javascript：

演示