-2

我正在尝试实现这个确切的功能： http: //jsfiddle.net/exttq/ 但是在里面使用我的 PHP，现在它显示 2 个复选框和 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;
}

等待您的回复...

4

1 回答 1

3

问题是您的脚本在元素出现在 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 就绪处理程序中：

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

jQuery 始终将代码包装在DOM 就绪处理程序中的最佳实践之一，即：

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

或更短的速记：

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

两者具有相同的效果，它们阻止代码在 DOM 准备好之前执行。

另一个 JavaScript 最佳实践是将 JS 代码放在页面的页脚（就在</body>. .

上述两种最佳实践都是可以组合的。尽管如此，简单地使用 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 就绪处理程序文档的更多信息 - Aliasing the jQuery Namespace：

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

于 2012-10-19T23:39:41.470 回答