0

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

我的脚本：

    $(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/

4

5 回答 5

2

请试试这个：

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

于 2012-10-05T13:06:57.683 回答
2

一方面，你为什么document.getElementById在使用 jquery 时使用？

您还需要将 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();
    }
});
于 2012-10-05T13:11:43.483 回答
2

简化代码：

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

参考现场演示

​</p>

于 2012-10-05T13:15:43.857 回答
1

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

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

于 2012-10-05T13:10:32.617 回答
1

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

​</p>

于 2012-10-05T14:14:14.780 回答