Verstecken/Zeigen von Absätzen nach Checkbox Status und Eingabe Text Wert

Question

Es gibt 4 Absätze, ein leeres Textfeld, 1 Kontrollkästchen und eine Schaltfläche.

Ich möchte 1 Absatz verstecken, wenn ich die Checkbox und „1“ auf dem Feld, die Absätze 2 schreiben zu verstecken, wenn ich die Checkbox und aufschreiben 2 usw.

Die HTML:

<p class="p1">P1</p> 
<p class="p2">P2</p> 
<p class="p3">P3</p> 
<p class="p4">P4</p> 

<input id="txt" type="text" name="fld" value="" /> <br /> <br /> 

P <input id="pcheck" type="checkbox" name="pcheckbox" /> <br /> <br /> 

<input id="disapp" type="button" value="Disappear" /> 

Das JavaScript:

$(document).ready(function(){ 
    $("#disapp").click(function() { 
     if(($("#pcheck").is(":checked")) && ($(#txt).val()=="1") { 
      $(".p1").hide();  
     } 
    }); 
}); 

ich habe versucht, die Formatierung es auch so:

$(document).ready(function(){ 
    $(disapp).click(function() { 
     if(($pcheck.checked) && ($txt.value()=="1")) { 
      $p1.hide();  
     } 
    }); 
}); 

Und ich weiß nicht, welche Formatierung ist richtiger und ich weiß nicht, wie es funktioniert.

Answer 1

Ihr Code weist einige Syntaxprobleme auf, die zu Fehlern führen. Sie können die Entwicklerkonsole in Ihrem Browser verwenden, um die Fehler zu sehen.

Was ist mit Ihrem ersten Skript-Block falsch:

$(#txt).val() nicht funktioniert, weil ein Wähler eine Zeichenfolge sein muss. Ändern Sie es in $('#txt').val().

Auch Ihre if Anweisung fehlt eine schließende Klammern. Es sollte if(($("#pcheck").is(":checked")) && ($(#txt).val()=="1"))

Arbeitsbeispiel sein: https://jsfiddle.net/75wjrbyj/

Ihr zweiter Skriptblock macht die gleichen mehrfach Wähler Fehler, solange Sie die Variablen nicht definieren disapp, $pcheck usw. es Fehler werfen.

Answer 2

Erstellen Sie das Textfeld Wertwähler und Sichtbarkeit ändern toggle() Methode mit einem Boolean-Parameter in diesem Fall is() Methode Booleschen Wert mit zurückgibt und es verwendet werden kann.

$(document).ready(function() { 
 
    $("#disapp").click(function() { 
 
    $(".p" + $('#txt').val().trim()).toggle(!$("#pcheck").is(":checked")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="p1">P1</p> 
 
<p class="p2">P2</p> 
 
<p class="p3">P3</p> 
 
<p class="p4">P4</p> 
 

 
<input id="txt" type="text" name="fld" value="" /> 
 
<br /> 
 
<br />P 
 
<input id="pcheck" type="checkbox" name="pcheckbox" /> 
 
<br /> 
 
<br /> 
 

 
<input id="disapp" type="button" value="Disappear" />

---

Ihr Code haben verschiedene Fehler: Im ersten Fall gibt Anführungszeichen um das Textfeld ein Selektor und eine zusätzliche Klammer auch fehlt. Ändern Sie es wie if($("#pcheck").is(":checked") && $("#txt").val()=="1"). Im zweiten Fall sind alle Variablen nicht definiert, ich konnte nirgends sehen, wie es definiert ist.

Answer 3

Probieren Sie etwas wie dieses

$(document).ready(function(){ 
    $("#disapp").click(function() { 
     if(($("#pcheck").is(":checked"))){ 
if($("#txt").val()=="1") 
      $(".p1").hide(); 
    if($("#txt").val()=="2") 
      $(".p2").hide(); 
     } 
    }); 
}); 

Answer 4

Sie können das gewünschte Verhalten erreichen, indem die index der p Elemente und slice() verwenden.Versuchen Sie folgendes:

$('#disapp').click(function() { 
 
    var index = parseInt($('#txt').val(), 10); 
 
    var $p = $('p'); 
 

 
    if (!index) { 
 
    $p.show(); 
 
    } else if ($('#pcheck').is(':checked')) { 
 
    $p.show().slice(0, index).hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>P1</p> 
 
<p>P2</p> 
 
<p>P3</p> 
 
<p>P4</p> 
 

 
<input id="txt" type="text" name="fld" value="" /><br /><br /> 
 
P<input id="pcheck" type="checkbox" name="pcheckbox" /><br /><br /> 
 
<input id="disapp" type="button" value="Disappear" />

Answer 5

Ich denke Schaltergehäuse mehr besser ist, in diesem Fall zu handhaben ...

$("#disapp").click(function() { 
     var p = $("#txt").val(); 
     if($("#pcheck").is(":checked")) { 
      switch(p) { 
      case "1" : $(".p1").hide();  
      case "2" : $(".p2").hide(); 
      case "3" : $(".p3").hide(); 
      case "4" : $(".p4").hide(); 
      default : 
     } 
     } 
    }); 

oder

$("#disapp").click(function() { 
     var p = $("#txt").val(); 
     if($("#pcheck").is(":checked")) {   
      $(".p"+p).hide(); 
     }   
    }); 

Answer 6

Hier wird etwas, das ich zusammensetze r. Es verändert Teile deines Körpers und schreibt das Skript komplett um. aber es tut, was Sie in Ihrer Beschreibung beschrieben haben.

<script language=JavaScript> 

var NumberOfPs=4; 


var allPars= new Array(NumberOfPs-1) 
self.window.onload=LoadAll 









function LoadAll(){ 
    var i; 

    for (i=0;i<NumberOfPs;i++) 
    { 


    allPars[i]=document.getElementById ("par" + (i+1)).innerHTML; 


    } 
} 






function disappear(){ 

    var x=document.getElementById("txt").value; 
    var i 

    x=Math.floor (x); 


    if (document.getElementById("pcheck").checked) 
    { 



    for (i=1;i<=NumberOfPs;i++) 
    { 


     if (i<=x) 
     document.getElementById ("par"+i).innerHTML=""; 
     else 
     document.getElementById ("par"+i).innerHTML=allPars[i-1]; 



    } 





    } 



} 



</script> 

<body bgcolor="white"> 



    <span id=Par1> 
    <p class="p1">P1</p> 
    </span> 

    <span id=Par2> 
    <p class="p2">P2</p> 
    </span> 


    <span id=Par3> 
    <p class="p3">P3</p> 
    </span> 


    <span id=Par4> 
    <p class="p4">P4</p> 
    </span> 




    <input id="txt" type="text" name="fld" value="" /> <br /> <br /> 

    P <input id="pcheck" type="checkbox" name="pcheckbox" /> <br /> <br /> 

    <input id="disapp" type="button" value="Disappear" onclick=disappear() /> 


</body> 

Beachten Sie, dass ich die P-Tags in einzelne Span-Tags verschoben habe.

Wenn Sie mehr p-Tags hinzufügen, können Sie die var NumberOfPs=4-var NumberOfPs=x ändern, wo x ist die Menge an p-Tags Sie haben.

ps: Wenn Sie die Zahl verringern, die Sie in das Textfeld schreiben und auf verschwinden klicken, werden die ps, die größer als die aktuelle Zahl sind, erneut angezeigt.