Question

我正在尝试为 Wordpress 中的某个小部件创建一个复选框选项，这样当它被选中时，它会显示/显示一些内容。

问题是，当选中复选框时，它不会显示内容。

    <p>
        <input type="checkbox" id="tcheckbox" class="checkbox" name="<?php echo $this->get_field_name('checkbox'); ?>" value="1" <?php checked( '1', $checkbox ); ?>/>
        <label for="<?php echo $this->get_field_id('checkbox');?>"><?php _e('My Checkbox.'); ?></label>

        <div id="tcheckboxdiv" style="display:none">
            <p>T One:</p>
            <p><input type="text" class="widefat" name="one" placeholder="1" readonly></p>
            <p>T Two:</p>
            <p><input type="text" class="widefat" name="two" placeholder="2" readonly></p>
        </div>
    </p>            

    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery("#tcheckbox").change(function() {
            jQuery("#tcheckboxdiv").fadeToggle("slow");
        });
    });
    </script>

由于我对javaScript和PHP相当陌生，我想知道上面是否有任何冲突的脚本，因为它似乎在这里工作得很好：http://jsfiddle.net/GhZDP/

谢谢。

Answer 1

这个问题很难重现，因为它实际上是在你提供的小提琴中工作的。

在您的情况下我会做的是检查代码是否通过在alert()

中投入jQuery(window).load()来执行

之后，尝试不同的方法来监听DOM ready：

jQuery(function () {
    // Code here
});

jQuery(document).ready(function() {
    // Code here
});

这不是您的解决方案的真正答案，而是支持帮助您调试此问题。虽然在评论中发帖太大了（并且变得不可读）。

您也可以尝试这样的委托事件监听器（这需要您将'widgetForm'ID添加到<form>标记中）：

jQuery(function () {
    jQuery("#widgetForm").on("change", "#logocheckbox", function () {
        // Your code goes here; e.g. $("#logocheckboxdiv").fadeToggle("slow");
    });
});

但是，我只是猜测并帮助你调试，因为我无法真正重现你的问题。

Answer 2

由于WP在noConflict模式下运行，因此您的jQuery对象$将无法在WordPress上运行。您应该将jQuery称为jQuery，而不是$。

<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('#logocheckbox').change(function() {
        jQuery("#logocheckboxdiv").fadeToggle("slow");
    });
});
</script>

另外，please don't post duplicate questions！

Answer 3

虽然jsFiddle工作得非常好，但上面的脚本无法工作，因为它没有在 Wordpress 的源代码中正确输出。

Wordpress 管理页面也使用javaScript，这会导致编码冲突。

创建一个复选框

3 个答案: