Question

iam试图实现这个功能：http://jsfiddle.net/exttq/但是内部使用我的PHP，现在它显示2个复选框和2个表单，但我需要的是：除非我选中任何框，否则这两个表格不可见。

所以，请检查以下代码中的错误...

function eshop_extras_checkout($echo){


    $echo .= '

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

    <script>

    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
    
</script>';

    $echo .= '<fieldset class="eshop eshop_extra">' . "\n";


    $echo .= ' <form id="chooseForm">
        <input type="checkbox" name="form1" value="form1"> Form1<br>
        <input type="checkbox" name="form1" value="form2"> Form2<br>
    </form>

    <form id="form1" class="formGroup">
        <h2>FORM 1</h2>
        <label>Name</label><input type="text"> <br>
        <label>Address</label><input type="text">
    </form>

    <form id="form2" class="formGroup">
        <h2>FORM 2</h2>
        <label>Username</label><input type="text"> <br>
    </form>';


    $echo .= '<legend>Articles Order Form</legend>' . "\n";



    return $echo;
}

waiitng回复你...

Answer 1

问题是您的脚本在DOM中存在元素之前执行。参见：

//when this line executes:
$(".formGroup").hide(); //the .formGroup is not present in the DOM yet
//in other words, the jQuery object is empty and calling .hide() does nothing

//the same happens to this handler binding:
$("#chooseForm input:checkbox").on("change", ...

你的小提琴的JS设置为使用onDomReady包装器，这就是它在那里正常工作的原因。

您可以将脚本放在表单的HTML下面，和/或简单地将脚本内容包装在DOM ready handler中：

$(function() {
    $(".formGroup").hide();
    $('#chooseForm input:checkbox').on('change', function() {
        if($(this).is(':checked')) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }   
    });
});

jQuery的最佳实践之一，始终将代码包装在DOM ready handler中，即：

$(document).ready(function() {
    //code here
});

或简短得多的简写：

$(function() {
    //code here
});

两者都具有相同的效果，它们会阻止代码执行，直到DOM准备就绪。

另一个JavaScript最佳实践是将JS代码放在页面的页脚中（就在</body>之前），这样脚本加载不会阻止页面呈现，当DOM解析器到达脚本时，你的DOM已经为他们做好了准备。

上述两种最佳做法都是可以组合的。然而，简单地使用DOM就绪处理程序将解决问题，并且将脚本移动到表单下面HTML也足够了。

您的框架已经在noConflict模式下加载了另一个jQuery副本，这意味着您无法在全局范围内使用$别名。为了解决这个问题，您可以使用这种特殊的DOM就绪语法，它将jQuery别名回到其范围内的$：

jQuery(function($) {
    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
});

来自DOM ready handler docs的更多信息 - 别名jQuery命名空间：

使用其他JavaScript库时，我们可能希望打电话 $.noConflict()以避免名称空间困难。当这个功能是被叫，$快捷方式不再可用，迫使我们写 jQuery每次我们通常会写$。但是，处理程序传递给.ready()方法可以接受一个参数，该参数被传递全局jQuery对象。这意味着我们可以重命名该对象我们的.ready()处理程序的上下文，不会影响其他代码。

只有当我复选框时才会显示相应的表格

1 个答案: