Javascript将内容隐藏在标签标签和标签标签中

Question

我希望根据标签标签中的文本隐藏文本，我希望在下一个标签标签中隐藏文本。我知道如何隐藏用户名，因为文本总是一样的，但我不知道如何隐藏用户消息。

代码如下所示：

​

<div id="chatbox">
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">BlockMe:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">BlockMe:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
</div>

​

这就是我希望它在javascript运行之后的样子：

​

<div id="chatbox">
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick" style="display: none">BlockMe:</label>
	<br>
	<label id="cmsg" style="display: none">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick" style="display: none">BlockMe:</label>
	<br>
	<label id="cmsg" style="display: none">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
</div>

​

Answer 1

假设使用jquery，则可以使用.html()获取元素中的值，然后使用.next()获取下一个label元素。

类似于：

$('label').each(function(){
 if($(this).html() == "BlockMe:"){
    $(this).hide();
    $(this).next().hide()
  }
 });

Answer 2

首先:请注意ID必须是唯一的。“‘cnick”、“cmsg”、“cspc”应该是类。

您可以为每个用户名/消息创建一个容器。藏起来就容易多了。

<div id="chatbox">
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
</div>

然后，您必须能够使用jquery找到您不想用选择器(类、id或其他任何东西)隐藏的框，并且可以这样隐藏这些框：

$(mySelector).hide();