Question

我编写了一个可以通过一些考虑过的单选按钮来隐藏或显示我的类的脚本，但它在运行时不起作用并且不会动态地改变任何想法？

我的剧本：

    $(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();
        }
    });

JsFiddle演示： http://jsfiddle.net/BpMed/

Answer 1

请试试这个：

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中添加以上代码。每次更新时，您只需拨打电话 forDynamic（）;

Answer 2

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

您还需要将if块包装在正在寻找要点击的无线电的功能的一侧。见jsfiddle。我在每个复选框中添加了一个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();
    }
});

Answer 3

简化代码：

$(".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();
    }
});

参考 LIVE DEMO

Answer 4

很难说这么少的上下文，但看起来这个函数只在document.ready上执行 - 初始页面加载。如果你想要更动态的东西，你需要将你的函数绑定（http://api.jquery.com/bind/）到这些复选框的更改事件。

类似的基本示例： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

Answer 5

我知道你已经接受了答案，但是你可以使用切换并传入一个条件 - 所以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);
});

http://jsfiddle.net/HLmru/

hide（）在运行时不起作用

5 个答案: