JavaScript实现悬停数组元素显示滑块赋值及单元素删除问题

完整可运行代码 #

HTML #

<div class="container">
   <form>
      <h1>输入搜索内容</h1>
      <input id="name" type="text" />
      <input type="button" value="搜索" onclick="insert()" />
   </form>
   <br/>
   <div id="display"></div>
   <br/>
   <label >已选中：</label>
   <h3 id="labelprint"></h3>
</div>

CSS #

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

.container {
  border: solid 2px;
  display: block;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
  padding: 20px;
}
/* 单个元素容器样式 */
.item-wrap {
  position: relative;
  display: inline-block;
  border: 2px solid blue;
  margin-left: 5px;
  padding: 2px 8px;
  cursor: pointer;
}
/* 滑块默认隐藏 */
.item-slider {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 10;
}
/* 悬停时显示滑块 */
.item-wrap:hover .item-slider {
  display: block;
}
/* 删除按钮样式 */
.del-btn {
  display: inline-block;
  margin-left: 6px;
  color: red;
  font-weight: bold;
  font-size: 14px;
}

JavaScript #

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

function insert ( ) {
  // 非空校验避免插入空值
  if(nameInput.value.trim() === '') return
  // 数组存储对象，同时保存元素文本和滑块对应数值
  names.push({
    text: nameInput.value,
    value: 50 // 滑块默认值可自定义调整
  });
  clearAndShow();
}

// 单个元素删除函数，接收元素索引参数
function removeItem(index) {
  names.splice(index, 1)
  clearAndShow()
}

// 滑块更新对应元素数值函数
function updateValue(index, newValue) {
  names[index].value = newValue
  // 如果需要直接用滑块值替换元素文本，可修改为 names[index].text = newValue
  clearAndShow()
}

function clearAndShow () {    
  let printd=""  
  nameInput.value = "";
  messageBox.innerHTML = "";
  // 遍历数组时携带索引参数
  names.forEach(function(item, index){
    // 创建单个元素容器
    const itemWrap = document.createElement('div');
    itemWrap.className = 'item-wrap'
    
    // 插入文本节点，当前展示格式为「文本(滑块值)」可按需调整
    const textNode = document.createTextNode(`${item.text}(${item.value})`)
    itemWrap.appendChild(textNode)
    
    // 插入删除按钮
    const delBtn = document.createElement('span')
    delBtn.className = 'del-btn'
    delBtn.innerText = '×'
    delBtn.onclick = () => removeItem(index)
    itemWrap.appendChild(delBtn)

    // 插入滑块控件
    const slider = document.createElement('input')
    slider.type = 'range'
    slider.min = 0
    slider.max = 100
    slider.value = item.value
    slider.className = 'item-slider'
    slider.oninput = (e) => updateValue(index, e.target.value)
    itemWrap.appendChild(slider)

    messageBox.appendChild(itemWrap)

    printd +=`'${item.text}:${item.value}', `
  })
  // 去掉末尾多余的逗号和空格
  document.getElementById("labelprint").innerHTML = printd.slice(0, -2)
}

核心修改说明 #

• 单个删除功能修复：
  原删除事件绑定在了整个列表容器上，导致点击就删除全部内容，现在删除按钮绑定在每个单独的元素项上，点击时通过索引删除数组对应位置的元素后重新渲染列表即可实现单个删除
• 悬停显示滑块功能实现：
  每个元素项内置滑块控件，默认隐藏，通过CSS的hover伪类控制悬停时显示，滑块绑定input事件，滑动时实时更新对应数组元素的数值，同步刷新页面显示
• 数据结构调整：将原来的纯文本数组改成存储对象的数组，同时保存元素文本和滑块对应的数值，方便后续扩展使用

内容的提问来源于stack exchange，提问作者dennod