题解 | #设置标签#
设置标签
https://www.nowcoder.com/practice/b164e87713804e1ab46cf7a84936b6ba
思路：其实该题主要实现addTag和removeTag。对于addTag，首先获取输入框内容，当输入框有内容时，获取所有类名为tag的span元素集合，并判断是否有元素值等于输入值，如果有则不添加标签，反之则创建标签等一系列处理。对于removeTag，首先获取前一个兄弟元素，当输入框内容为空且前一个兄弟元素不为空时则删除前一个兄弟元素。
<body>
<div class="tag-input">
<span class="tag">前端</span>
<span class="tag">编程题</span>
<span class="tag">示例</span>
<span class="tag">标签</span>
<input type="text" class="js-input" maxlength="6" placeholder="请输入标签">
</div>
<script type="text/javascript">
var tagInput = {
isInited: false,
init: init,
bindEvent: bindEvent,
addTag: addTag,
removeTag: removeTag
};
tagInput.init();
function init() {
var that = this;
if (that.isInited) return;
that.isInited = true;
// 请修改这一行代码，保存class为js-input的输入框的dom元素引用
that.input = document.querySelector('.js-input');
that.bindEvent();
}
function bindEvent() {
var that = this;
var input = that.input;
if (!input) return;
input.addEventListener('keydown', function (event) {
// 请修改这一行代码，判断用户是否按了回车键
var isEnter = (event.keyCode===13);
// 请修改这一行代码，判断用户是否按了删除键
var isDelete = (event.keyCode===8);
(isEnter || isDelete) && event.preventDefault();
isEnter && that.addTag();
isDelete && that.removeTag();
});
input.parentNode.addEventListener('click', function () {
input.focus();
});
}
function addTag() {
var that = this
var input = that.input
var tagText=input.value.trim()
var taginput = document.querySelector('.tag-input')
var add=false
if(tagText.length>0)
{
var tags=document.querySelectorAll('.tag')
Array.from(tags).forEach(item=>{
if(item.innerText===tagText)
{
input.value=''
add=true
}
})
if(!add)
{
var tag=document.createElement('span')
tag.classList.add('tag')
tag.innerText=tagText
taginput.insertBefore(tag,input)
input.value=''
}
}
}
function removeTag() {
var that = this
var input = that.input
var taginput = document.querySelector('.tag-input')
var previousElement=input.previousElementSibling
if(input.value===''&&previousElement)
taginput.removeChild(previousElement)
}
</script>
</body>
总结：首先观察页面结构，模版代码对其逻辑实现进行了分解，我们可以逐步攻破。
#设置标签#
投递工商银行等公司9个岗位 >