創建一個復選框

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

這個問題很難重現，因為它實際上在您提供的Fiddle中起作用。

在您遇到的情況下，我要做的就是檢查代碼是否僅通過在jQuery(window).load()放入alert()執行

之后，嘗試其他方法來監聽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>

另外， 請不要發布重復的問題 ！

Answer 3

盡管jsFiddle工作得很好，但是上面的腳本無法正常工作，因為在Wordpress的源代碼中未正確輸出該腳本。

WordPress管理頁面也使用javaScript，這會導致編碼沖突。