如何在頁面加載中使用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的元素？

回答

相關問題