Question

我是jQuery的新手，但我真的很喜欢它。

我有一些jQuery，如下所示，按预期工作，如果有一个更有效，更少资源饥饿的方法来做同样的事情，我会徘徊。

<script type="text/javascript">
    $(function() {
        $("select.openTime").change(function() {
            if ($(this).val() != 'Closed') {
                $(this).next(".hidden_element").css('display', 'block');
            }
            if ($(this).val() == 'Closed') {
                $(this).next(".hidden_element").css('display', 'none');
            }

        });
    });
</script>

欢迎任何建议。谢谢中号

Answer 1

建议

使用ID而不是标记/类选择器，因为底层的getElementById效率更高
而不是显示阻止/无 - 为什么不尝试.slideToggle（）或fadeToggle（） - 在http://api.jquery.com/检查这些

Answer 2

以下解决方案是 little 更高效，更易读：

$(function(){

    $("select.openTime").change(function() { 
        var $nextHiddenElement = $(this).next(".hidden_element")
        
        if ($(this).val() != 'Closed') {   
            $nextHiddenElement.show();
        }
        else {   
            $nextHiddenElement.hide();
        }
    });

});

Answer 3

你可以使用else作为开始。或者更好的是，只需使用.toggle()

$(function() {
    $("select.openTime").change(function() {
        $(this).next(".hidden_element").toggle($(this).val() != 'Closed');
    });
});

Answer 4

您可以在原始javascript中执行此操作。只需将以下脚本添加到onchange元素的select：

var current = this.nextSibling;
while(current){
    if(current.className='hidden_element'){
        if(this.value == 'Closed'){
            current.style.display = 'none';
        }else{
            current.style.display = 'block';
        }
        return;
    }else{
        current = current.nextSibling;
    }
}

Answer 5

首先，减少DOM解析。

var state = $(this).val();
var $next = $(this).next(".hidden_element");

DOM访问是您最耗费资源的操作。尽可能减少对DOM的引用/扫描。此外，如果可以的话，通过为每个块添加唯一ID而不是类来使其更容易。也许这不是设计......

其次，使用类或show（）/ hide（）方法。

if(state == "CLOSED") { 
  $next.hide();
  // or...
  $next.addClass('hidden');
} else
  $next.show();
  // or...
  $next.removeClass('hidden');
}

注意：这很简单，可以制作一个干净的三元语句：

(state == "CLOSED") ? $next.hide() : $next.show();

这将减少您的条件逻辑，并减少您搜索DOM的调用。

最终结果：

<script type="text/javascript">
    $(function() {
        $("select.openTime").change(function() {
            var state = $(this).val();
            var $next = $(this).next(".hidden_element");

            (state == "CLOSED") ? $next.hide() : $next.show();        
        });
    });
</script>

Answer 6

对我来说很好看，你也可以使用内置的show和hide函数来使你的代码更具可读性。

Answer 7

我没有看到有什么资源如此饥渴......我修复了你的条件：

    <script type="text/javascript">
$(document).ready(function(){
    $("select.openTime").change(function() { 
        if ($(this).val() == 'Closed') {    
                    $(this).next(".hidden_element").css('display','none');
            } else {
                    $(this).next(".hidden_element").css('display','block');
            }       
    });
});

</script>

此外：
css('display','none');可以更改为hide(); css('display','block');可以更改为show();

Answer 8

这不应该是非常重的资源。我唯一要改变的是使用show（）和hide（）而不是css（）调用。

$(this).next(".hidden_element").show();

Answer 9

看看这个：

<script type="text/javascript">
  $(function() {
    $("select.openTime").change(function() {
      var object = $(this);

      if (object.val() != 'Closed') {
          object.next(".hidden_element").css('display', 'block');
      } else {
          object.next(".hidden_element").css('display', 'none');
      }
    });
  });
</script>

谢谢你应该减轻你的资源。

希望有所帮助。

有没有更好的方法来执行此jQuery功能

9 个答案: