ダイブオンクリックボタンの表示/非表示

IDが異なる2つのボタンがあります。私は、同じidを持つボタンがクリックされたときに特定の段落を非表示にしたい。私はidのボタンをクリックして "TEST1" 私はIDが "1" と段落を非表示にする場合は、あなたが見ることができるようにここでダイブオンクリックボタンの表示/非表示

は私のコード

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

です。しかし、それは動作していません。

出典

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

ダイブオンクリックボタンの表示/非表示

答えて

関連する問題