如何在页面加载中使用select字段的下拉选项值来隐藏使用JQuery的元素？

我根据选择字段具有以下JQuery的当前值隐藏一些元素：如何在页面加载中使用select字段的下拉选项值来隐藏使用JQuery的元素？

$('.select').change(function() { 
    $(this).parent().siblings('*[class*=hide-if-]').show(); 
    $(this).parent().siblings('.hide-if-' + $(this).val()).hide(); 
});

，它工作正常。（元素具有动态类，例如“hide-if-123”）

但是，我还想在页面加载时隐藏相关元素。我应该使用不同的功能（而不是“更改”）吗？

或者也许把代码放在函数之外，所以它在加载和更改时执行？我试过这个：

$('.select').parent().siblings('.hide-if-' + $('.select').val()).hide();

但它不起作用。我认为我有这个部分$('.select').val()错了。

重要的是它获得与行开始处的相同的选择字段的值。我也试过：

$('.select').parent().siblings('.hide-if-' + $(this).val()).hide();

但仍然没有运气。

非常感谢您的帮助！

来源

2012-03-06 Elizabeta

的要素，以在加载页面时执行更改逻辑，您可以简单地触发change事件。

$(function() { 
    $('.select').trigger('change'); 
});

来源

2012-03-06 22:56:10

谢谢，这个作品完美！我是JS的新手，如果你没有注意到，这个提示是一个很好的教训。 – Elizabeta 2012-03-06 23:09:27

您可以直接触发你已经创建的更改处理程序：

$('.select').change(function() { 
    $(this).parent().siblings('*[class*=hide-if-]').show(); 
    $(this).parent().siblings('.hide-if-' + $(this).val()).hide(); 
}).change();

调用.change()不带任何参数是.trigger('change')等同。

虽然上说，我不明白为什么你的代码：

$('.select').parent().siblings('.hide-if-' + $('.select').val()).hide();

是行不通的 - 做所有的元素，当第一次加载页面存在吗？并且上面的行包含在文档就绪处理程序中和/或在元素之后的主体结尾处）？

来源

2012-03-06 22:44:19 nnnnnn

事实上，我认为它也应该工作，花了两个小时弄清楚为什么它不会。从下面的答案中添加函数做到了这一点。谢谢你的时间，但我很感激。 – Elizabeta 2012-03-06 23:11:43

不客气。请注意，您应该在文档准备好的时候（或者在主体的末尾）添加更改处理程序 - 如上所述，在绑定处理程序后立即添加了'.change（）'调用，我假定它已经处于文档准备就绪状态。 – nnnnnn 2012-03-07 00:37:43

添加一个公共类的所有元素，并使用CSS来隐藏他们

.hidden-class{ display:none}

好处是不;吨不得不等待脚本来踢，使隐藏

来源

2012-03-06 22:55:09 charlietfl

这些类是动态添加的。如果我用CSS隐藏它们，如果JS被禁用，它们将变得不可用。虽然谢谢！ – Elizabeta 2012-03-06 23:14:58

如何在页面加载中使用select字段的下拉选项值来隐藏使用JQuery的元素？

回答

相关问题