从 li 中删除子弹

Question

我是一个 JavaScript 初学者，我正在构建一个小的 select 函数。 我想用小块的形式显示我的李，它们在选择时添加了不同的背景颜色。

我的 ul 遇到问题，我无法移除子弹以将元素放入正确的行中。 它以级联的形式显示它，我不知道为什么，即使我使用了 list-style-type:none;

如果你想看一看，这是我的代码：

 var part = document.querySelector('#part-list ul'); function clickHandlerPart(e) { if (n == 1) { if (e.target.tagName !== 'LI') { console.log(e.target); if (e.target.className == "addpart") { console.log('selected'); e.target.className = 'removepart'; e.target.style.backgroundColor = '#9361bf'; e.target.style.fontSize = '20px'; e.target.style.marginLeft = '30px'; e.target.style.border = '1px solid #fff'; e.target.style.borderRadius = '4px'; e.target.style.padding = '10px, 10px, 10px, 10px'; e.target.style.float = 'left'; part.appendChild(e.target); } else { console.log('unselected'); e.target.className = 'addpart'; e.target.style.backgroundColor = '#fff'; } n++; console.log('****************'); } } else { n = 1; return; } } part.addEventListener('click', clickHandlerPart);

 #parts { margin-left: 30px; display: inline; white-space: nowrap; } #parts h2 { text-align: center!important; } #parts ul { list-style-type: none; } #parts li { border: 1px solid #fff; font-size: 20px; } .addpart, .removepart { float: left; padding: 10px, 10px, 10px, 10px; font-size: 20px; margin-left: 30px!important; }

 <div id="part-list"> <h2>Which part(s) have you been working on today?</h2> <ul> <li> <span class="addpart">Decoratives</span> </li> <li> <span class="addpart">Windows</span> </li> <li> <span class="addpart">Signage Gibela</span> </li> <li> <span class="addpart">Signage Prasa</span> </li> <li> <span class="addpart">Stripes</span> </li> <li> <span class="addpart">Others</span> </li> </ul> </div>

Answer 1

li的项目符号可以由ul元素的list-style属性控制。

ul {
    list-style: none;
}

Answer 2

我认为你的问题现在解决了：

 var part = document.querySelector('#part-list ul'); function clickHandlerPart(e) { if (n == 1) { if (e.target.tagName !== 'LI') { console.log(e.target); if (e.target.className == "addpart") { console.log('selected'); e.target.className = 'removepart'; e.target.style.backgroundColor = '#9361bf'; e.target.style.fontSize = '20px'; e.target.style.marginLeft = '30px'; e.target.style.border = '1px solid #fff'; e.target.style.borderRadius = '4px'; e.target.style.padding = '10px, 10px, 10px, 10px'; e.target.style.float = 'left'; part.appendChild(e.target); } else { console.log('unselected'); e.target.className = 'addpart'; e.target.style.backgroundColor = '#fff'; } n++; console.log('****************'); } } else { n = 1; return; } } part.addEventListener('click', clickHandlerPart);

 #parts { margin-left: 30px; display: inline; white-space: nowrap; } #parts h2 { text-align: center!important; } ul { list-style: none; } #parts li { border: 1px solid #fff; font-size: 20px; } .addpart, .removepart { float: left; padding: 10px, 10px, 10px, 10px; font-size: 20px; margin-left: 30px!important; }

 <div id="part-list"> <h2>Which part(s) have you been working on today?</h2> <ul> <li> <span class="addpart">Decoratives</span> </li> <li> <span class="addpart">Windows</span> </li> <li> <span class="addpart">Signage Gibela</span> </li> <li> <span class="addpart">Signage Prasa</span> </li> <li> <span class="addpart">Stripes</span> </li> <li> <span class="addpart">Others</span> </li> </ul> </div>

Answer 3

只需使用以下 CSS 从列表中删除样式

li {
  list-style: none;
}

Answer 4

实际上，您的 css 中存在一些问题。 请检查我的解决方案。 我希望这将有所帮助。

 var part = document.querySelector('#part-list ul'); function clickHandlerPart(e) { if (n == 1) { if (e.target.tagName !== 'LI') { console.log(e.target); if (e.target.className == "addpart") { console.log('selected'); e.target.className = 'removepart'; e.target.style.backgroundColor = '#9361bf'; e.target.style.fontSize = '20px'; e.target.style.marginLeft = '30px'; e.target.style.border = '1px solid #fff'; e.target.style.borderRadius = '4px'; e.target.style.padding = '10px, 10px, 10px, 10px'; e.target.style.float = 'left'; part.appendChild(e.target); } else { console.log('unselected'); e.target.className = 'addpart'; e.target.style.backgroundColor = '#fff'; } n++; console.log('****************'); } } else { n = 1; return; } } part.addEventListener('click', clickHandlerPart);

 #parts { margin-left: 30px; } #parts h2 { text-align: center!important; } ul { list-style: none; } #parts li { border: 1px solid #fff; font-size: 20px; }

 <div id="part-list"> <h2>Which part(s) have you been working on today?</h2> <ul> <li> <span class="addpart">Decoratives</span> </li> <li> <span class="addpart">Windows</span> </li> <li> <span class="addpart">Signage Gibela</span> </li> <li> <span class="addpart">Signage Prasa</span> </li> <li> <span class="addpart">Stripes</span> </li> <li> <span class="addpart">Others</span> </li> </ul> </div>

Answer 5

在 CSS 中，您正在设置 id 选择器#parts样式，但您的 html 中没有任何带有该 id 的内容。 删除 id 并只选择元素。

ul {
    list-style: none;
}