在小部件保存后使jQuery.change()事件持久化

时间:2015-06-29 作者:Marcio Duarte

我正在创建一个自定义小部件,它使用一个带有一组选项的select元素和一个简单的jQuery函数来触发某些<div>通过jQuery的.change() 事件

如下所示,保存小部件时,此操作失败。如果我选择另一个选项,它会再次工作。

The event is lost after save, or adding the widget

以下是缩写代码:

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-addedwidget-updated 事件,没有运气。

有什么想法吗how to make the <div> visibility persistent 保存小部件后,根据选择?

1 个回复
最合适的回答,由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的初始阶段。

结束

相关推荐

无法使用jQuery从带有GET_BODY_CLASS()的JSON字符串添加类

为了刷新<body>元素在AJAX调用之后,我在AJAX响应的顶部用JSON编写以下内容:$o[ \'classes\' ] = get_body_class(\'project\');然后,我可以在JSON响应中看到以下内容:\"classes\":[\"single\",\"single-project\" ,\"postid-1793\",\"logged-in\",\"project\",\"default\"]我正在尝试使用jQuery将所有这些类放入主体中,以便“刷新”它们