Show/Hide dive onclick button

Ich habe zwei Tasten mit verschiedenen IDs. Ich möchte bestimmte Absätze ausblenden, wenn auf eine Schaltfläche mit ähnlicher ID geklickt wird.Show/Hide dive onclick button

Hier ist mein Code

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

Wie Sie, wenn i-Taste mit der ID klicken sehen "test1" Ich will den Absatz mit der ID "1" verstecken. Aber es funktioniert nicht.

Quelle

2017-11-18 Johna Kelkar

Nur die .p in Ihren Wählern loszuwerden:

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

Sie haben noch keine Elemente mit einem Klasse Wert von p. Darüber hinaus müssen Sie keine anderen Selector-Elemente verwenden, da Sie auf ein bereits eindeutiges id ausgerichtet sind.

Hinweis: Bitte beachten Sie auch die Informationen zu restrictions on id values. Insbesondere sollte id nicht mit einem Zahlenzeichen beginnen. (Es sei denn, dass sich das in neueren HTML-Versionen ändert?) Während Ihr Code mit meiner obigen Änderung funktioniert scheint wie beabsichtigt in meinem Browser zu funktionieren. Es kann nicht garantiert werden, dass es in einem bestimmten Browser funktioniert.

Stattdessen können Sie jedoch einen Buchstaben in Ihren id Werten verwenden und das gleiche Ergebnis erzielen. Zum Beispiel:

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

Quelle

2017-11-18 11:24:23 David

-IDs nicht mit einer Nummer – Pedram

@pedram Start: Hmm, guten Punkt. Obwohl dieser Code anscheinend funktioniert, ist es nicht unbedingt * garantiert * in einem bestimmten Browser zu funktionieren. Ich werde das in die Antwort aufnehmen. – David

Show/Hide dive onclick button

Antwort

Verwandte Themen