Question

有4个段落，一个空白文本字段，一个复选框和一个按钮。

当我勾选复选框并写入＆＃34; 1＆＃34;时，我希望隐藏1个段落在该字段中，当我选中复选框并记下2等时隐藏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" />

JavaScript：

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

我尝试将其格式化为：

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

而且我不知道哪种格式更正确，而且我也不知道如何使其正常工作。

Answer 1

使用文本字段值创建选择器，并使用 toggle() 方法切换可见性，在这种情况下使用布尔参数 is() 方法返回布尔值它可以使用。

＆＃13;

public static class XNodeExtensions
{
    public static void FlattenCollection(this XElement parent)
    {
        if (parent == null || parent.Parent == null)
            throw new ArgumentNullException();

        if (parent.Elements().Count() == 0)
            return;

        XNamespace json = @"http://james.newtonking.com/projects/json";
        XName isArray = json + "Array";

        foreach (var child in parent.Elements().ToList())
        {
            child.Remove();
            child.Name = parent.Name;
            child.Add(new XAttribute(isArray, true));
            parent.Parent.Add(child);
        }

        parent.Remove();
    }
}

＆＃13;

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

＆＃13;

您的代码有各种错误：在第一种情况下，文本框选择器周围缺少引号，另外还有一个附加括号。像<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" />一样更改它。在第二种情况下，所有变量都是未定义的，我无法在任何地方看到它的定义。

Answer 2

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

你的第一个脚本块出了什么问题：

$(#txt).val()不起作用，因为选择器需要是一个字符串。将其更改为$('#txt').val()。

此外，您的if语句错过了结束括号。它应该是if(($("#pcheck").is(":checked")) && ($(#txt).val()=="1"))

工作示例：https://jsfiddle.net/75wjrbyj/

您的第二个脚本块会多次产生相同的选择器错误，只要您不定义变量disapp，$pcheck等，它就会抛出错误。

Answer 3

尝试这样的事情

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

Answer 4

您可以使用index元素的p和slice()来达到所需的行为。试试这个：

$('#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

我认为切换案例在这种情况下处理得更好......

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

或

2016-06-01 11:46:00

Answer 6

这是我放在一起的东西。它确实修改了你的身体部位，并完全重写了脚本。但它完成了你在描述中描述的内容。

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

请注意我在各个Span标签中移动了P标签。

如果您添加更多p标记，则可以将var NumberOfPs=4更改为var NumberOfPs=x，其中 x 是您拥有的p标记数量。

ps：如果您减少在文本框中写入的数字并单击消失，则大于当前数字的p将重新显示。

根据复选框检查状态和输入文本值隐藏/显示段落

6 个答案: