Question

我有两个不同ID的按钮。我想在点击具有相似ID的按钮时隐藏特定的段落。

这是我的代码

＆＃13;

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

＆＃13;

正如你可以看到我点击了ID为＃34; test1＆＃34;我想用id＆＃34; 1＆＃34;隐藏段落。但它没有用。

Answer 1

只需摆脱选择器中的.p：

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

您没有任何 class 值为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>

显示/隐藏潜水点击按钮

1 个答案: