Question

我正在试图弄清楚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();
    });
 )};

Answer 1

toggleClass：

怎么样？

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

然后通过CSS过渡添加动画：

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

有许多方法可以“做事”，但最终还是要编写高性能，“可理解”的代码并与浏览器支持等保持一致.jQuery API确实有一些很好的方法也是自我解释它的命名惯例。

使用类和CSS转换可以很好地将逻辑与表示分开，并且其他同事很容易挂钩到CSS而不受内联样式的困扰。

Answer 2

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

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

使用$(...).hide()匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（“display”，“none”），除了将display属性的值保存在jQuery的数据高速缓存中，以便稍后可以将显示恢复到其初始值。如果元素的显示值为内联并隐藏然后显示，则它将再次以内联方式显示。

除了一些vs Internet Explorer之外，所有主流浏览器都支持隐藏属性。隐藏属性不得用于隐藏可合法显示在其他演示文稿中的内容。例如，使用隐藏来隐藏选项卡式对话框中的面板是不正确的，因为选项卡式界面仅仅是一种溢出显示 - 同样可以通过滚动条在一个大页面中显示所有表单控件。使用此属性仅从一个演示文稿隐藏内容同样不正确 - 如果某些内容被标记为隐藏，则会隐藏所有演示文稿，例如屏幕阅读器。

属性与属性

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

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

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

2 个答案: