如果找到类，如何隐藏元素

How to approach hiding an element if class is found

本文关键字：隐藏 元素 何隐藏 如果      更新时间：2024-06-30

我仍然在努力弄清楚jquery，在我的尝试中，我不仅试图弄清楚如何使用各种东西，还试图弄清楚为什么，我还没有测试过任何东西，所以甚至不确定它是否有效（如果我的代码很糟糕，请提前道歉）；然而，对于jquery，似乎有无数种方法可以处理所有问题，那么什么是最好的方法呢？如果没有列出，有什么更好的方法？为什么？

如果存在.active类，则此代码用于显示/隐藏元素。

if($('.active').length > 0){
   $('.more').attr('hidden').animate({opacity: "1"}, 200);
   /* ...or should I use
     $('.more').prop('hidden');
   */
}

或者类似的东西？

if($('.active').length > 0){
   $('.more).is(':hidden');
}
if($('.active').length === 0);
   $('.more').not(':hidden');
}

还是仅仅添加/删除类更合适？

if($('.active').length > 0){
   $('.more).addClass('hidden').fadeOut('fast');
}
if($('.active').length === 0);
   $('.more').removeClass('hidden').fadeIn('fast');
}

还是应该像这样显示/隐藏项目？

if($('.active').length > 0){
   $('.more).hide('fast');
}
if($('.active').length === 0);
   $('.more').show('fast');
}

假设HTML是这样的：

<p class="more">More something or another</p> <!-- hidden if .active exists -->
<ul>
    <li class="active"></li> <!-- active added dynamically if selected -->
    <li></li>
</ul>

执行.active切换的代码正在工作，如下所示：

 $(document).ready(function() {
    $('.vl-toggle-link').click(function(e) {
      e.preventDefault();
      $(this).siblings('.content').slideToggle(function(){
         var offsetTop = $(this).parent().offset().top;
         $('body,html').stop().animate({scrollTop: offsetTop-20 });
      }).parent('li').toggleClass('active').siblings('li').removeClass('active').children('.content').slideUp();
    });
 )};

toggleClass:怎么样

$('.more').toggleClass('hidden', !!$('.active').length))

然后通过CSS转换添加动画：

.more { -webkit-transition:opacity 500ms; opacity:1 }
.hidden { opacity:0 }

有很多方法可以"做事情"，但归根结底，这是一个编写高性能、"可理解"的代码并与浏览器支持保持一致的问题。jQuery API确实有一些很棒的方法，这些方法在其命名约定中也具有自平面性。

使用类和CSS转换可以很好地将逻辑与表示分离，其他同事也可以很容易地连接到CSS中，而不必为内联样式而烦恼。

IMO最好的解决方案是使用类，因为每个浏览器都支持它们。

animate（）方法允许我们创建动画效果，如果您想要平滑过渡，请使用它。

使用$(...).hide()，匹配的元素将立即隐藏，而不显示动画。这大致相当于调用.css（"display"，"none"），只是display属性的值保存在jQuery的数据缓存中，以便以后可以将display恢复到其初始值。如果一个元素的显示值为inline，并且被隐藏然后显示，那么它将再次以内联方式显示。

所有主要浏览器都支持隐藏属性，除了Internet Explorer的某些版本。隐藏属性不能用于隐藏可以在其他演示文稿中合法显示的内容。例如，在选项卡式对话框中使用"隐藏"来隐藏面板是不正确的，因为选项卡式界面只是一种溢出表示——同样可以在一个带有滚动条的大页面中显示所有表单控件。同样，使用此属性仅从一个演示文稿中隐藏内容也是不正确的——如果某个内容被标记为隐藏，则它将从所有演示文稿中被隐藏，例如，包括屏幕阅读器。

属性与属性

属性和属性之间的差异在特定情况下可能很重要。在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从jQuery 1.6开始，.pr（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected应使用.pro（）方法进行检索和设置。在jQuery1.6之前，可以使用.attr（）方法检索这些属性，但这不在attr的范围内。这些没有相应的属性，只是属性。

相关文章：