2017-11-18 192 views
0

我有兩個不同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」的段落。但它不起作用。

回答

0

只是在你的選擇擺脫.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>

+1

的ID不能以數字開頭 – Pedram

+1

@pedram:嗯,好點。雖然這段代碼似乎有效,但它不一定能保證在任何給定的瀏覽器中工作。我會在答案中包括這一點。 – David