Javascript隐藏内容在标签标签和标签标签之后

Javascript hide content in label tag and label tag after

本文关键字：标签 之后 隐藏 Javascript      更新时间：2023-09-26

我想根据标签标签中的文本隐藏文本，我想在下一个标签标签中隐藏文本。我知道如何让它隐藏用户名，因为文本总是相同的，但我不知道如何让它隐藏用户信息。

代码如下:

<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>

假设您正在使用jquery，您可以使用.html()来获取元素内部的值，然后使用.next()来获取下一个标签元素。

类似:

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

首先:请注意ID必须是唯一的。'尼克'，'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();
相关文章：