使用jQuery实时显示隐藏自定义元函数

Question

我正在尝试通过jQuery切换一些自定义元框的可见性。我设法在默认情况下隐藏它们，并在点击正确的帖子格式时使它们可见。

我没有找到一个解决方案，使元框消失时，用户更改后的格式。

例如:默认:隐藏点击“侧边”：显示从“侧边”到任何其他帖子格式的切换:隐藏。

我有以下代码：

jQuery(document).ready(function () {
    jQuery("#postbox-container-2").addClass("hidden");

    if (jQuery("input#post-format-video").is(':checked')) {
        jQuery("#postbox-container-2").removeClass("hidden");
    }

    jQuery("input#post-format-video").change(function () {

        if (jQuery(this).is(':checked')) {
            jQuery("#postbox-container-2").removeClass("hidden");
        }
    });

});

有什么想法吗？

基于@zipp小提琴的不同方法

Query(document).ready(function() {
    jQuery( "#postbox-container-2" ).hide();
    var toToggle='';
    jQuery('input#post-format-video').change(function() {
        if (toToggle){
        jQuery(toToggle).hide();
        }

            //alert(this.value+ " is checked");
            var selector='#postbox-container-2';
            jQuery(selector).toggle();     
            toToggle=selector;       
    });
});

即使这个也能正常工作，但当我单击不同的单选按钮时，它不会实时更改

Answer 1

下面是您的示例的jsfiddle。change事件被触发为only on the checked input。如果未选中某个特定输入，则不会触发此操作。为了知道您的特定输入是否未被检查，您需要测试选定的输入是否为您的：$(this).attr('id') == 'post-format-video'并执行您的操作。在我的示例中，我使用$('input:radio[name=myRadio]')选择无线电输入，因此您需要调整您的html和代码，使其具有正确的选择器。

//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
        //if we have a radio button selected previously we hide the div related
        if (toToggle){
        $(toToggle).hide();
        }
        //select the div we want to show
        var selector;
        if ($(this).attr('id')=='post-format-video'){
        selector='#postbox-container-2';
        }
        ...
        //show it (could have called toggle() )
        $(selector).show();
        //store it for the next selection     
        toToggle=selector;