Question

我之前遇到过类似的问题，并且可以根据这两种情况进行排序。我想要的是“是”单选按钮，用其他问题切换div的外观。在论坛中查看其他解决方案后，我认为我的HTML很扎实，但我的jquery很不稳定。我不确定我做错了什么。

$(document).ready(function(){
$("input[name$='yes']").click(function(){
    var test = $(this).val();

    $("div.desc").show();
});
});

这是我的html和jQuery的小提琴： http://jsfiddle.net/g63m9yyg/

此外，如果有任何好的jQuery / JS教程或资源，请转介我。 HTML / CSS很容易让我接受，但我正在努力使用jQuery，而且我正在为这个项目使用它。

谢谢！

Answer 1

我相信你已经忘记了在你的小提琴中加载jQuery库。另外，名称为ifmachinery的输入元素不存在...我相信你指的是名为machinery的那个？

我不建议将click事件绑定到输入，而是建议将其绑定到.change()事件，然后根据输入的值使用逻辑来决定要做什么。从这个意义上讲，您的代码将是可扩展的，并且易于修改，并且可能更加冗长。

$(document).ready(function(){
    $("input[name='machinery']").change(function(){
        if($(this).val()=='yes') {
            $("div.desc").show();
        } else {
            $("div.desc").hide();
        }
    });
});

http://jsfiddle.net/teddyrised/g63m9yyg/2/

如果您希望在首次加载页面时应用此逻辑，则必须在DOM就绪上运行/执行此逻辑。而不是重复两次功能，即：

$(document).ready(function(){
    // Run when DOM is ready
    if($(this).val()=='yes') {
        $("div.desc").show();
    } else {
        $(("div.desc").hide();
    }

    // When input is changed
    $("input[name='machinery']").change(function(){
        if($(this).val()=='yes') {
            $("div.desc").show();
        } else {
            $(("div.desc").hide();
        }
    });
});

您可以简单地将逻辑放在一个函数中，并在DOM就绪和输入onChange事件的情况下调用它：

$(document).ready(function(){
    // Define logic
    var ifMachinery = function(ele) {
        if(ele.val()=='yes') {
            $("div.desc").show();
        } else {
            $("div.desc").hide();
        }   
    }

    // Run logic on DOM ready
    ifMachinery($("input[name='machinery']"));

    // Run logic when input onChange is fired
    $("input[name='machinery']").change(function() {
        ifMachinery($(this));
    });
});

http://jsfiddle.net/teddyrised/g63m9yyg/3/

用单选按钮切换div的外观

1 个答案: