Question

在jQuery中有很多关于隐藏/显示功能的教程，但无法找到有关我的问题的任何内容。我不喜欢编程，jquery对我来说是第一次。

我想在用户点击＆＃34;链接1＆＃34;等等......它隐藏了这个词＆＃34;隐藏我＆＃34;下面。目前它部分有效，但它只隐藏了实际链接...而不是＆＃34;隐藏我＆＃34;字。我知道它与选择器有关...但不知道将选择器放在哪里。

感谢。

$(document).ready(function(){
//user clicks on link
    $('a').click(function(){
         //hides the word below link but doesn't work
        $(this).hide();
    });


});

我已经尝试了

 $(this).hide("panel");

和

  $("panel", this).hide();

由于

Answer 1

它无法正常工作，因为当你说$（this）时，它只会占用clicked元素的对象和anchor标记：

使用它：

$(this).closest("div").hide();

而不是

$(this).hide();

帮助自己： 尝试：

console.log($(this));

//这将显示$(this)采取的内容：

<强>更新

基于您的html结构，您可以使用以下内容：

$(this).parent().next().hide()

<强>样本

＆＃13;

$(document).ready(function(){
    $('a').click(function(){
		 
         $(this).parent().next().hide();
    });
   
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div id="wrap">
		<div id="main">
			
			
			<div class="row">
				<div class="column">
					<p><a href="#" title="Click me!">Link 1</a></p>
				
					<div class="box">
						<p>Hide me</p>
					</div>
				</div>
				
				<div class="column">
					<p><a href="#" title="Click me!">Link 2</a></p>
				
					<div class="box">
						<p>Hide me</p>
					</div>
				</div>
				
				<div class="column">
					<p><a href="#" title="Click me!">Link 3</a></p>
				
					<div class="box">
						<p>Hide me </p>
					</div>
				</div>
			</div>
		</div>
	</div>

＆＃13;

Answer 2

变化：

$(this).hide();

为：

$(this).parent().next('.box').hide();

$(this)隐藏了您点击的内容

Answer 3

怎么样：

$(this).closest('.column').find(".box").hide();

Answer 4

请看哪个面板代表什么。在这

$("panel").hide();

您正试图隐藏所有面板的标签尝试使用id

$("#panel").hide();

或班级名称

$(".panel").hide();

或者如果这是＆＃34;这个＆＃34;的子节点。读入 https://api.jquery.com/children/

Answer 5

您可以使用closest功能实现此功能，并使用children类隐藏.box。 Jsfiddle demo基于您的代码。

$(document).ready(function(){
    $('a').click(function(){
        $(this).closest('.column').children('.box').hide();
    });  
});

单击一个div可隐藏不同的div

5 个答案: