Javascript hide（）在运行时不起作用

我写了一个脚本，可以通过一些考虑过的单选按钮隐藏或显示我的类，但它在运行时不工作，也不会动态更改，有什么想法吗

我的剧本：

    $(document).ready(function() {
        if (document.getElementById('addContent').checked) {
            $(".contentForm").show();
            $(".searchContentForm").hide();
        }
        else if (document.getElementById('editContent').checked || 
                       document.getElementById('deleteContent').checked) {
            $(".searchContentForm").show();
            $(".contentForm").hide();
        }
        else {
            $(".searchContentForm").hide();
            $(".contentForm").hide();
        }
    });​

JSFIDLE演示： 请尝试以下方法：

function forDynamic()
{
        if (document.getElementById('addContent').checked) {
            $(".contentForm").show();
            $(".searchContentForm").hide();
        }
        else if (document.getElementById('editContent').checked || 
                       document.getElementById('deleteContent').checked) {
            $(".searchContentForm").show();
            $(".contentForm").hide();
        }
        else {
            $(".searchContentForm").hide();
            $(".contentForm").hide();
        }

}

---

在javascript中添加上述代码。每次更新时，您只需调用Dynamic

很难说上下文太少，但看起来这个函数只在document.ready上执行，这是初始页面加载。如果想要更具动态性，则需要将函数绑定到这些复选框的更改事件

类似情况的最基本示例：

---

首先，为什么在使用jquery时使用document.getElementById

您还需要将if块包装在查找要单击的收音机的函数的一侧。看这个。我在每个复选框中添加了一个changeup类，您当然可以添加任何您想要的内容

$(".changeUp").click(function() {
    if ($('#addContent').is(':checked')) {
        $(".contentForm").show();
        $(".searchContentForm").hide();
    }
    else if ($('#editContent').is(':checked')) {
        $(".searchContentForm").show();
        $(".contentForm").hide();
    }
    else if ($('#deleteContent').is(':checked')) {
        $(".searchContentForm").show();
        $(".contentForm").hide();
    }
    else {
        $(".searchContentForm").hide();
        $(".contentForm").hide();
    }
});

简化代码：

$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=tContent]').click(function() {    
    if ($('#addContent').is(':checked')) {
        $(".contentForm").show();
        $(".searchContentForm").hide();
    }
    else if ($('#editContent').is(':checked') || 
             $('#deleteContent').is(':checked')) {
        $(".searchContentForm").show();
        $(".contentForm").hide();
    }
});

提及

---

​

我知道您已经接受了答案，但是您可以在条件中使用toggle和pass-因此true=show和false=hide-这基本上消除了if/else语句中的重复，而只是为了显示/隐藏元素

$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=contentMng]').change(function() {   
   var adc =  $('#addContent').is(':checked'); 
   var edc = $('#editContent').is(':checked') ||  $('#deleteContent').is(':checked');
   $(".contentForm").toggle(adc);
   $(".searchContentForm").toggle(edc);
});

---

​

你知道什么是| |吗？它可以简化代码并消除大量复制和粘贴。为什么要将getElementById与jquery混合并匹配？请设置一个JSFIDLE演示。另外，“不工作”并不是一个我们可以处理的问题描述。@iSun-jQuery.$”addContent'将选择它。这将仅在加载时运行。您是否试图捕获单选按钮的单击？在这种情况下，你需要抓住这一事件…湿婆查兰的实际上是更好的。它更紧凑，减少了冗余代码。我只是想得不够多，没能做到that@Eonasdan，我同意您关于getElementById的看法。但是，getElementById比jQuery选择器更快，因为它使用Javascript原生代码@LaurentBrieu几乎所有使用jQuery的操作都可以通过POJ完成，但jQuery的代码更少，我的意思是jQuery甚至有$fn.solveWorldHunger和$fn.peaceforeyone：