如何使用javaScript或Css隐藏li标签的值

Question

我有一个字母列表，这些字母中的每一个都在li标签内：

<ul>
    <li class="letter">A</li>
    <li class="letter">B</li>
    <li class="letter">C</li>
    <li class="letter">D</li>
</ul>

问题是如何隐藏那些字母（A，B，C，D）而不隐藏li标签本身，因为它已经有了样式而我不想丢失它...以及如何使用javaScript使它们可见功能？

PS：列表由javaScript函数创建：

                var ul = document.createElement('ul');
                ul.setAttribute('id','letters');
                var txt = txtword.value;
                var t, tt;
                var word = new Array();

                for (i=0;i<txt.length;i++)
                    word[i] = txt[i];


                document.getElementById('answer_div').appendChild(ul);
                word.forEach(wordletters);

                function wordletters(element, index, arr) {
                    var li = document.createElement('li');
                    li.setAttribute('class','item');

                    ul.appendChild(li);

                    t = document.createTextNode(element);

                    li.innerHTML=li.innerHTML + element;
                }

提前致谢。

Answer 1

    <ul>
        <li class="letter"><input style="display:none;" type="text" id="A" value="A"></li>
        <li class="letter"><input style="display:none;" type="text" id="B" value="B"></li>
        <li class="letter"><input style="display:none;" type="text" id="C" value="C"></li>
        <li class="letter"><input style="display:none;" type="text" id="D" value="D"></li>
    </ul>

您可以使用以下函数显示li数据。

function show_li_data(id){
$("#"+id).show();
}

Answer 2

一种方法，你可以简单地将A，B，C，D包裹在这样的范围内

<ul>
    <li class="letter"><span>A<span></li>
    <li class="letter"><span>B<span></li>
    <li class="letter"><span>C<span></li>
    <li class="letter"><span>D<span></li>
</ul>

然后

li span{
display:none
}

这是codepen：https://codepen.io/anon/pen/oEmJLP

Answer 3

考虑visibility财产：

.letter:nth-child(2) {
  visibility: hidden;
}

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">C</li>
  <li class="letter">D</li>
</ul>

如果你想保留子弹，或者考虑一个小宽度和一些溢出技巧。

li {
 list-style:inside;
}

.letter:nth-child(2) {
  width:5px;
  overflow:hidden;
  white-space:nowrap;
}

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">C</li>
  <li class="letter">D</li>
</ul>

然后简单地使用一个可以用JS添加/删除的类：

document.querySelectorAll('.letter')[2].classList.add('hide');

li {
 list-style:inside;
}

.hide{
  width:5px;
  overflow:hidden;
  white-space:nowrap;
}

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">C</li>
  <li class="letter">D</li>
</ul>

Answer 4

修改了答案。尝试使用text-indent;在你的情况下，只需添加：

风格= “TEXT-INDENT：-9999px;”在每个li标签中

Answer 5

解决方案是：

                function wordletters(element, index, arr) {
                var li = document.createElement('li');
                li.setAttribute('class','item');

                ul.appendChild(li);
                var span = document.createElement('span');
                li.appendChild(span);


                span.innerHTML=span.innerHTML + element;
            }

此函数将在li标签内创建一个span，因此我可以隐藏跨度而不隐藏li标签。

谢谢大家的时间^ _ ^

Answer 6

您应该按类名选择这些元素，并设置display：none。

document.getElementsByClassName（“letter”）。style.display ='none'document.getElementByClassName（“letter”）。style.display ='block'