【问题标题】:Hide label and inputfield with css or jquery使用 css 或 jquery 隐藏标签和输入字段
【发布时间】:2011-12-20 23:58:15
【问题描述】:

在这个小提琴中,我有一部分表格: http://jsfiddle.net/ZXSKH/55/

我试图通过选择具有 css 的类并设置 display:none 来隐藏默认的标签和 1 个输入字段。这适用于选择“输入”,但是对于标签这不起作用,因为我在其他地方使用 display:inline-block 或 block 然后再次使标签可见。

我应该用 jquery 隐藏标签和输入字段,而不是在 css 中执行此操作? 有人可以帮我吗?

【问题讨论】:

    标签: jquery css forms label hide


    【解决方案1】:

    正如我在您的代码和 html 中看到的,您正在添加所有控件而没有任何容器。使用表格或 div。

    我更喜欢使用<div>。如果您想遵循相同的操作,请按照这两个链接作为参考来重置特定项目的 css,然后将 css 中的 visibility 设置为隐藏:

    h1.hidden {visibility:hidden;}
    

    Jquery: How to check if the element has certain css style

    http://api.jquery.com/css/

    将隐藏控件放入 div 中,然后您可以使用 $('#divName1').hide() 或 $('#divName1').show() 来实现您的功能。

    您可以生成动态 html 内容,而不是在单击选中项时指定一组控件.. 使用 insertAfter 之类的 jquery 方法。 您可以通过以下链接获得更多详细信息:

    http://api.jquery.com/?ns0=1&s=insertafter&go=

    选择 InsertAfter 以详细示例以简化您的流程。

    【讨论】:

    • 这只是一个巨大的表单 +70 输入字段超过 20div 的一小部分。不想让事情变得复杂。
    • 您可以按照第一种方法将隐藏控件放入 div 中,正如我首先说的那样...它会减少一半的工作量而不是您正确的工作量...您必须选择除三个之外的单个或里面有四个……
    【解决方案2】:

    你可以用 !important 覆盖显示:inline-block 等,所以创建一个类

    .hidden{display: none !important;}
    

    应用于您的标签或其他任何东西

    <label id="my-label" class="hidden"></label>
    

    如果您想删除它(使其可见),请使用 jquery

    $("#my-label").removeClass("hidden");
    

    【讨论】:

    • 对不起,但我不同意这种方法,因为像这个例子这样微不足道。除非万不得已,否则请避免使用!important 标签,因为它会在样式级联的自然方式中使用扳手。此外,jQuery 具有显示和隐藏的功能,无需手动添加/删除类。
    【解决方案3】:

    您不必在此处使用 javascript 来解决看似只是显示问题的问题。更好的做法是使用 css 找到解决方案,而不是使用错误的工具来解决问题。为什么需要将标签显示设置为在其他地方屏蔽?是否可以更具体地针对需要显示的特定标签,而将其余部分隐藏起来?

    【讨论】:

      【解决方案4】:

      如果您在要隐藏的字段周围放置div 标签,您的生活会更轻松,这样,您的 jQuery 代码可以显示/隐藏该特定 div(给它一个 id 来定位它)。这样,在标签上将 display 设置为 inline-block 或 block 不会有任何影响,因为包含标签的 div 已经隐藏。

      【讨论】:

      • @logistef 很高兴为您提供帮助 :-) 将 div 应用于您的 HTML 以对语义上属于一起的部分进行分组 - 毕竟这就是它们的用途!
      【解决方案5】:

      您可以使用 jquery 来隐藏标签和输入字段。 使用jquery可以很容易地完成

      例如。

      $(id).css('display','none');

      或者你也可以使用jquery的hide方法

      例如。

      $(id).hide();
      

      【讨论】:

        【解决方案6】:

        虽然是javascript!试一试。

            <script type="text/javascript">
            <!--
            function ShowOrHide(id) {
               var e = document.getElementById(id);
               e.style.display = 'block';
            }
        function Hide(id) {
               var e = document.getElementById(id);
        
                  e.style.display = 'none';
        
            }
            //-->
            </script>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-01-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-03-05
          • 2021-12-20
          • 1970-01-01
          • 2016-06-29
          相关资源
          最近更新 更多