Question

我有各种输入元素来控制各种依赖div的“隐藏”状态。

输入的类型不同，输入必须相等的值（显示div）也会有所不同。我使用php编写javascript（jQuery）取决于这些因素，使用一般代码：

PHP

$remove .=" $('#".$id."').removeClass('hide');";        
$add .="$('#".$id."').addClass('hide');";

...

$jquery ="              
    $(\"input[name$='$name."']\").change(function(){
        if(this.value == '".$key_val."') {
             ".$remove."
        } else {
             ".$add."
        }
    }).trigger('change');               
";

注意：$ remove和$ add变量是使用连接和循环构建的，因为可能有几个需要隐藏或显示的隐藏元素（因此。=）

这通常导致页面上的一段代码（实际代码），例如：

的jQuery

$(document).ready(function(){   
    $("input[name$='q_32']").change(function(){
        if(this.value == 'Yes') {
              $('#qu_33').removeClass('hide');
        } else {
             $('#qu_33').addClass('hide');
        }
    }).trigger('change');

    $("input[name$='q_32']").change(function(){
        if(this.value == 'No') {
              $('#qu_34').removeClass('hide');
        } else {
             $('#qu_34').addClass('hide');
        }
    }).trigger('change');
});

在页面上这很有效：当有问题的单选按钮（输入名称q_32）发生变化时，相应的元素将被隐藏或显示。

.trigger('change');就在那里，因为我希望在设置已检查状态服务器端的情况下隐藏或显示页面加载。

以下是HTML现在加载页面的方式：

HTML

<span>Yes</span>
<input type="radio" id="q_32_Yes" value="Yes" name="q_32" checked="">
<span>No</span>
<input type="radio" id="q_32_No" value="No" name="q_32">


<div id="qu_33" class="hide">...</div>
<div id="qu_34" class="">...</div>

即。单选按钮在已检查状态下加载是，但是正在显示不正确的div - 因此它正在触发，但似乎读取的值是错误的。

Answer 1

脚本应该是

$(document).ready(function () {
    $("input[name$='q_32']").change(function () {
        if (this.value == 'Yes') {
            $('#qu_33').removeClass('hide');
        } else {
            $('#qu_33').addClass('hide');
        }
    });

    $("input[name$='q_32']").change(function () {
        if (this.value == 'No') {
            $('#qu_34').removeClass('hide');
        } else {
            $('#qu_34').addClass('hide');
        }
    });

    $("input[name$='q_32']").filter(':checked').change()
});

演示：Fiddle

更正确的脚本将是

$(document).ready(function () {
    $("input[name$='q_32']").change(function () {
        if (this.value == 'Yes') {
            $('#qu_33').removeClass('hide');
            $('#qu_34').addClass('hide');
        } else {
            $('#qu_33').addClass('hide');
            $('#qu_34').removeClass('hide');
        }
    }).filter(':checked').change();
});

演示：Fiddle

如果您有相同代码的更多实例，那么try this

.trigger（'change'）在页面加载时坚持jQuery驱动显示元素

1 个答案: