javascript - jquery 代码工作正常，但其他单选按钮干扰其工作

Question

这里有两个jquery代码

代码1

$(document).ready(function() { 
    $("div.imgDisp").hide();
    $('[id="' + $(":radio:checked").val()+'"]').show();
    $(":radio").click(function() {      
        $("div.imgDisp").fadeOut('slow');
        $('[id="' + $(this).val()+'"]').fadeIn('slow');
    });
});

此代码隐藏选择单选按钮时的 div 检查这个 fiddle http://jsfiddle.net/nanoquantumtech/qudT2/3/

在此 fiddle 中，您可以在 name =“type”下看到一组 radio 。到这里为止一切正常..

还有其他一组单选按钮在不同的名称下..现在的问题是，当我单击不同名称下的任何单选按钮时，尽管它们与此 fiddle 代码无关，但单击它们会使效果无效这个 fiddle 的效果和这个 fiddle 的预期效果就消失了。 即，如果我单击除 fiddle 中显示的单选按钮之外的任何其他单选按钮，它们会使显示的结果隐藏，而 fiddle 中的结果应保留在屏幕上。我很惊讶..

同样的问题是我用来显示/隐藏文本文件的另一个 jquery 代码..[我省略了另一个代码，因为问题与该代码也相同]

伙计们，可能出了什么问题？提前致谢..

Answer 1

这里的问题是您正在为所有 radio 调用点击事件，即 $(":radio").click(function() { .. 仅将点击事件指定给那些 的 radio 名称=“类型”..

$('input[name="type"]:radio').click(function() {.... });

试试这个

$('input[name="type"]:radio').click(function() {
    $("div.imgDisp").fadeOut('slow');
    $('[id="' + $(this).val()+'"]').fadeIn('slow');
});    

这只会调用 name="type"和 radio 的输入的点击事件。

fiddle here