JQuery 控制html元素显示或隐藏

川长思鸟来 2022-09-24 05:14 406阅读 0赞

在做项目中用到界面元素显示或隐藏的功能。比如：点击编辑按钮，切换复选框的显示隐藏。根据数据库中某一字段的不同值，在界面上显示不同的按钮组合。因此查找了如何控制界面元素的显示或隐藏方法。

一、通过jquery封装好的方法：

1、jQuery hide() 和show()：

$("#hide").click(function(){
      $("p").hide();
    });
     
    $("#show").click(function(){
      $("p").show();
    });

function ShowOrHidden() {
          var state = document.getElementById("worksstate").value;
          if (state == "送拍") {
              $("#auctioned").show();
              $("#shooted").hide();
              $("#auction").hide();
              $("#shoot").hide();
              return false;
          }
    
      }

根据id为worksstate的input元素的value值，设置多个div显示隐藏。

2、jQuery toggle()：

$("button").click(function(){
      $("p").toggle();
    });

可以借助W3school的在线测试工具验证一下：

[http://www.w3school.com.cn/tiy/t.asp?f=jquery\_hide\_show][http_www.w3school.com.cn_tiy_t.asp_f_jquery_hide_show]

二、通过设置元素的属性

3、设置id为one的元素的display属性为block：显示；设置id为three的元素的display属性为none：隐藏；

function ShowDelete() {
           $("#one").css('display','block');//显示
           $("#three").css('display','none'); //隐藏
       }

4、获取界面上所有的input元素，如果input元素为复选框checkbox类型，就设置它们隐藏。

5、设置元素的visibility属性。

$(selector).css("visibility","hidden");//隐藏
    $(selector).css("visibility","visible");//显示

此种方式的隐藏虽然不显示了，但是元素依然占着位置。这是与上两种方式的不同之处。