显示/隐藏潜水onclick按钮

我有两个不同ID的按钮。点击具有类似ID的按钮时，我想隐藏特定的段落。显示/隐藏潜水onclick按钮

这里是我的代码

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     var id = $(this).attr("id").replace('test', ''); 
 
     $('.p #'+id+'').hide(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<h2>This is a heading</h2> 
 

 
<div class="gallery"> 
 
<div class="picture"> 
 
<p id="1">This is a paragraph.</p> 
 
<p id="2">This is another paragraph.</p> 
 
</div> 
 
</div> 
 

 

 
<button id=test1>Click me1</button> 
 
<button id=test2>Click me2</button> 
 

 
</body> 
 
</html>

正如你可以看到，如果我点击与ID按钮“测试1”我想隐藏ID为“1”的段落。但它不起作用。

来源

2017-11-18 Johna Kelkar

只是在你的选择摆脱.p的：

$('#'+id+'').hide();

你不必与p一个类值的任何元素。但是，更重要的是，您不需要使用任何其他选择器元素，因为您的目标是已经是唯一的id。

说明：请同时参考有关restrictions on id values的信息。特别是，id不应以数字字符开头。（除非在更新的HTML版本中有所变化）虽然我的上述修改代码，确实似乎在我的浏览器中按预期工作。它可能无法保证在任何给定的浏览器中工作。

但是，您可以在id值中使用字母并获得相同的结果。例如：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     var id = $(this).attr("id").replace('test', ''); 
 
     $('#'+id+'').hide(); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<h2>This is a heading</h2> 
 

 
<div class="gallery"> 
 
<div class="picture"> 
 
<p id="A">This is a paragraph.</p> 
 
<p id="B">This is another paragraph.</p> 
 
</div> 
 
</div> 
 

 

 
<button id="testA">Click me1</button> 
 
<button id="testB">Click me2</button> 
 

 
</body> 
 
</html>

来源

2017-11-18 11:24:23 David

的ID不能以数字开头 – Pedram

@pedram：嗯，好点。虽然这段代码似乎有效，但它不一定能保证在任何给定的浏览器中工作。我会在答案中包括这一点。 – David

显示/隐藏潜水onclick按钮

回答

相关问题