最佳实践，实现上下箭头选择字段

Question

什么是设置的最佳途径个箭头向上/向下滑动/选择器中选择元素在网页中是这样的：

1. 具有专用背景的选择列表。如果是，那么如何检测到用户点击向上或向下箭头？
2. 为每个百分比上/下项目构建一个三行/一列的表格，其中：a）行1 =向上箭头，b）行2 =选择选项列表，c）行3 =向下箭头
3. 其他一些解？

注：百分比可以增加/ 5％步骤减少

Answer 1

您可以使用<input type="number">元素，<label>元素，css:before，:after，input事件来处理点击input type="number"元素，自定义事件处理点击label元素。

$("label[for]").on("click", function(event) { 
 
    $("#input").val(function(_, n) { 
 
    return event.target.htmlFor === "up" 
 
      ? +n < +this.max ? +n + 5 : n 
 
      : +n > +this.min ? +n - 5 : n; 
 
    }).trigger("arrow") 
 
}); 
 

 
$("#input").on("input arrow", function(event) { 
 
    if (event.isTrigger) { 
 
    console.log("arrow"); 
 
    } else { 
 
    console.log("input") 
 
    } 
 
    console.log(this.value + "%") 
 
});

@charset "UTF-8"; 
 
div { 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
input[type="number"] { 
 
    width: 45px; 
 
    outline: thin solid navy; 
 
} 
 
label[for="up"]:nth-of-type(1):before { 
 
    content: "\25B2"; 
 
    top: -20px !important; 
 
    left: 32.5px; 
 
    position: relative; 
 
} 
 
label[for="down"]:before { 
 
    content: "\25BC"; 
 
    position: relative; 
 
    top: 20px !important; 
 
    left: -32.5px; 
 
} 
 
label[for="down"]:after { 
 
    content: "%"; 
 
    position: relative; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    position: relative; 
 
    left: -10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="select1"> 
 
    <option value="abc">abc</option> 
 
    </select> 
 
    <label for="up"></label><input id="input" type="number" min="0" max="100" step="5" value="0"><label for="down"></label> 
 
</div> 
 
<script> 
 
</script>