Question

如果有很多li元素，我想要一些商店的产品目录。 Html：

<p> Choose collor: <span class="Black">Black</span>, <span class="white ">white </span>, <span class="Yellow">Yellow </span>

<ul>
  <li id="Black"> Black Shoe </li>
  <li id="white"> white Shoe </li>
  <li id="Yellow "> Yellow Shoe </li>
</ul>

我想删除其中的其他元素，我点击了：

var Black = document.getElementById("Black");
var white = document.getElementById("white");
var Yellow = document.getElementById("Yellow ");


document.getElementsByClassName("Black").onclick = function() { white.style.display = 'none';
Yellow.style.display = 'none'; };

document.getElementsByClassName("white").onclick = function() { Black.style.display = 'none';
Yellow.style.display = 'none'; };

document.getElementsByClassName("Yellow").onclick = function() { white.style.display = 'none';
Black.style.display = 'none'; };

但问题是当用户点击黑色时它会隐藏白色和黄色，但是当用户点击黄色时，黄色已经隐藏了。

我该如何恢复？

我的意思是如何正确配置它？

当我点击黑色时，它必须隐藏白色和黄色，然后当我点击白色时，它应显示隐藏在上一个功能中的白色。

Answer 1

您可以为所有li元素使用不同的函数首先，当你点击黑色li时，该功能应该运行并隐藏替代的li 当你输入键盘或鼠标输出时，它也可以创建一个函数并在keyup事件上调用它，该函数将显示推荐的li并且所有其他所有人都会这样做，但是你可以回答：）

Answer 2

您可以通过添加

来指定特定的课程

$( this ).toggleClass( "new_class_name")

并使用css隐藏此.new_class_name

check the source

但是，由于您使用jquery 不，那么您应该这样做
之类的东西

<script>
function myFunction() {
   var elemenBlackt = document.getElementById("Black");
   elementBlack.classList.toggle("new_class_name");
}
</script>

查看示例here

希望它有所帮助！

Answer 3

您可以隐藏所有li元素，然后显示您想要的那个。像这样：

<ul>
  <li class="color" id="Black"> Black Shoe </li>
  <li class="color" id="white"> white Shoe </li>
  <li class="color" id="Yellow "> Yellow Shoe </li>
</ul>


var reveal = function(idName) {
  document.getElementById(idName).style.display = 'inline-block';
}

var hideAllButOne = function(idName) {
  document.getElementsByClassName("color").style.display = 'none';
  reveal(idName); 
}

document.getElementsByClassName("Black").onclick = function() { hideAllButOne('Black') };

document.getElementsByClassName("white").onclick = function() { hideAllButOne("white")  };

document.getElementsByClassName("Yellow").onclick = function() { hideAllButOne("Yellow")  };

如何在点击时删除li元素？

3 个答案: