时间戳

首页 > 解决方案 > 将鼠标悬停在数组元素上并为数组元素赋值时显示滑块

javascript - 将鼠标悬停在数组元素上并为数组元素赋值时显示滑块

问题描述

我已经完成了从文本框输入数组元素时必须生成数组元素的部分，我现在努力的是在悬停在每个数组元素上时显示一个滑块并给数组元素一个值，我也在努力解决要单独删除每个生成的数组元素，我的删除函数会在单击时删除整个数组，而不仅仅是我单击的单个元素。

它应该是这样的： 在此处输入图像描述

到目前为止，这是我的代码：

let names   = [];
    let nameInput   = document.getElementById("name");
    let messageBox  = document.getElementById("display");

    function insert ( ) {
     names.push( nameInput.value );
     clearAndShow();
     
    }

    function remove()
    {
     
      var element = document.getElementById("display");
      element.parentNode.removeChild(element);


    }



    function clearAndShow () {    
      let printd=""  
      nameInput.value = "";
      messageBox.innerHTML = "";
      names.forEach(function(element){
        if(element != ''){
         
            var _span = document.createElement('span');
           
                 _span.style.borderStyle = "solid"
                 _span.style.borderColor = "blue"
                 _span.style.width = '50px'
                 _span.style.marginLeft = "5px"
           
            _span.appendChild(document.createTextNode(element))
             messageBox.appendChild(_span)

           printd +="''"  + element +  "''" + ","  + " ";
  
            document.getElementById("labelprint").innerHTML=(printd)

        }  
      })
    }
h3 {
  color: rgb(0, 174, 255);
}

.container {
  border: solid 2px;
  display: block;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
}
<div class="container">
   <form>
      <h1>Enter Search</h1>
      <input id="name" type="text" />
      <input type="button" value="Search" onclick="insert()" />
   </form>
   <br/>
   <div onclick="remove(this)" id="display"></div>
   <br/>
   <label >You have Selected: </label>
   <h3 id="labelprint"></h3>
</div>

标签： javascripthtmljquerycssarrays

解决方案

我不是粗鲁，我只是对你如何表达你的信息感到困惑，但我认为你所说的是这样做：

var names = [];
var nameInput = document.getElementById("name");
var messageBox = document.getElementById("display");

function insert ( ) {
    names.push( nameInput.value );
    // add value to array val: names[names.length - 1] = PutValueHere
    clearAndShow();
}

function remove(this){
    document.getElementById("display").parentNode.firstChild.remove(); // If you want it to remove the last child with the id 'display' then do .parentNode.lastChild.remove()
//if you are trying to remove the last val in the array do this: names.splice(names.length-1,1) for the first do this names.splice(0,1)
}



function clearAndShow () {    
    var printd=""  
    nameInput.value = "";
    messageBox.innerHTML = "";
    names.forEach(function(element){
    if(element != ''){

        var _span = document.createElement('span');
        
        _span.id = '_spanId'
        $('_spanId').css('border-style',solid');
        $('_spanId').css('border-color',blue');
        $('_spanId').css('width',50+'px');
        $('_spanId').css('margin-left',5+'px');

        _span[0].appendChild(document.createTextNode(element))
        messageBox[0].appendChild(_span)

        printd += "''"  + element +  "'', ";

        document.getElementById("labelprint").innerHTML = printd
     }  
  })
}

推荐阅读