我有两个不同ID的按钮。我想在单击具有相似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', '');
$('.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为"test1"的按钮,我想隐藏id为"1"的段落。但它不起作用。
只需删除选择器中的.p
:
$('#'+id+'').hide();
您没有任何类值为 p
的元素。 但是,更重要的是,您不需要使用任何其他选择器元素,因为您的目标是已经唯一的id
。
注意:另请参阅有关id
值限制的信息。 特别是,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>