Fatal编程技术网
  • javascript/
  • Javascript 根据复选框'隐藏/显示段落；s选中状态并输入文本值

Javascript 根据复选框'隐藏/显示段落；s选中状态并输入文本值

javascript jquery if-statement

Javascript 根据复选框'隐藏/显示段落；s选中状态并输入文本值,javascript,jquery,if-statement,Javascript,Jquery,If Statement,共有4个段落、一个空白文本字段、1个复选框和一个按钮 当我选中复选框并在字段中写“1”时，我想隐藏一段，当我选中复选框并写下2时，我想隐藏两段，以此类推 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" nam

共有4个段落、一个空白文本字段、1个复选框和一个按钮

当我选中复选框并在字段中写“1”时，我想隐藏一段，当我选中复选框并写下2时，我想隐藏两段，以此类推

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" />
我也尝试过这样格式化它：

$(document).ready(function(){
    $(disapp).click(function() {
        if(($pcheck.checked) && ($txt.value()=="1")) {
            $p1.hide();     
        }
    });
});
我不知道哪种格式更正确，也不知道如何使用。

使用文本字段值创建选择器，并使用带有布尔参数的方法切换可见性。在这种情况下，方法返回布尔值，可以使用它。 
$（文档）.ready（函数（）{
$（“#失踪”）。单击（函数（）{
$（“.p”+$（'#txt'）.val（）.trim（））.toggle（！$（“#pcheck”）.is（“：选中”）；
});
});



p1


p2


p3


p4




P





您的代码存在一些语法问题，这会导致错误。您可以使用浏览器中的开发人员控制台查看错误

第一个脚本块有什么问题：


$（#txt）.val（）
不起作用，因为选择器必须是字符串。将其更改为
$（'#txt'）.val（）

另外，您的
if
语句缺少右括号。如果（$（“#pcheck”）.is（“：checked”）&（$（#txt）.val（）=“1”），

工作示例：

您的第二个脚本块多次出现相同的选择器错误，只要您不定义变量
misp
、
$pcheck
等。它将抛出错误。

尝试类似的操作

 $(document).ready(function(){
    $("#disapp").click(function() {
        if(($("#pcheck").is(":checked"))){
if($("#txt").val()=="1")
            $(".p1").hide();
    if($("#txt").val()=="2")
            $(".p2").hide();
        }
    });
});
通过使用
p
元素的
索引和
slice（）
可以实现所需的行为。试试这个：



$（'#失踪'）。单击（函数（）{
var index=parseInt（$（'#txt'）.val（），10）；
var$p=$（'p'）；
如果（！索引）{
$p.show（）；
}如果（$（'#pcheck'）。是（':checked'））{
$p.show（）.slice（0，index.hide（）；
}
});


P1

P2

P3

P4




P



我认为开关箱在这种情况下处理起来更好


$("#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 :  
        }
        }
    });


或


这是我整理的一些东西。它确实修改了你身体的某些部位，并完全重写了剧本。但它和你描述的一样


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




var NumberOfPs=4；
var allPars=新数组（NumberOfPs-1）
self.window.onload=LoadAll
函数LoadAll（）{
var i；

对于（i=0；i您一定遇到了语法错误，请参见非常感谢，但现在它对我来说太复杂了（（是的，我还认为第二种情况完全错误，但在某个地方看到了一个示例，并认为它可能会起作用。再次感谢。@tomalvi:无论如何，很高兴帮助您：）非常感谢，所以我的遗漏是。我必须更加专心。再次感谢！谢谢，但我是一个初学者，不幸的是还不熟悉switch case。无论如何，再次感谢。哦，太好了，代码现在短了很多。我是一个初学者，但当我对web编程有了更多的了解后，我一定会再看一遍。谢谢！谢谢你，wil过了一段时间我就试试这个！

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



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