我正在创建一个自定义小部件,它使用一个带有一组选项的select元素和一个简单的jQuery函数来触发某些<div>
通过jQuery的.change()
事件
如下所示,保存小部件时,此操作失败。如果我选择另一个选项,它会再次工作。
以下是缩写代码:
HTML视图
<div class="widget-test">
<div>
<select id="my-select" name="my-select" class="my-select">
<option value="0">Select an option</option>
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="row one">
<label for="option1">Option 1</label>
<input name="option1" class="widefat" type="text" value="">
</div>
<div class="row two">
<label for="option2">Option 2</label>
<input name="option2" class="widefat" type="text" value="">
</div>
<div class="row three">
<label for="option3">Option 3</label>
<input name="option3" class="widefat" type="text" value="">
</div>
</div>
JS公司
(function ($) {
"use strict";
$(function () {
$(\'body\').on(\'change\', \'#widgets-right select.my-select\', function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="1"){
$(".row").not(".one").hide();
$(".one").show();
}
else if($(this).attr("value")=="2"){
$(".row").not(".two").hide();
$(".two").show();
}
else if($(this).attr("value")=="3"){
$(".row").not(".three").hide();
$(".three").show();
}
else{
$(".row").hide();
}
});
}).change();
});
}(jQuery));
我尝试将JS函数附加到
widget-added
和
widget-updated
事件,没有运气。
有什么想法吗how to make the <div>
visibility persistent 保存小部件后,根据选择?
最合适的回答,由SO网友:marcovega 整理而成
每次保存时,表单都会重新加载,并返回到显示所有内容的初始状态。您可以这样做:
// Getting the value of the selected field
var my_select_value = $(\'#widgets-right select.my-select\').val();
// If there\'s no value selected, hide everything.
if(my_select_value == 0){
$(\'.widget-test .row\').hide();
}
// Otherwise, show the specific rows
if(my_select_value == 1){
$(\'.widget-test .row\').hide();
$(\'.widget-test .row.one\').show();
}
if(my_select_value == 2){
$(\'.widget-test .row\').hide();
$(\'.widget-test .row.two\').show();
}
if(my_select_value == 3){
$(\'.widget-test .row\').hide();
$(\'.widget-test .row.three\').show();
}
在JavaScript的初始阶段。