javascript - Jquery - 使用 radio 在一页上显示多个幻灯片

Question

我正在尝试在一页上显示多个幻灯片。我必须使用 radio 作为触发器。我无法同时显示两者，一个会关闭另一个!请看这个Fiddle.

var current = '';
$('[name="first_inputs"]').change(function() {
if(current.length) 
$('#' + current).slideUp();
current = $(this).val();
$('#' + $(this).val()).slideDown();
});

var current = '';
$('[name="second_inputs"]').change(function() {
if(current.length) 
$('#' + current).slideUp();
current = $(this).val();
$('#' + $(this).val()).slideDown();
});

我对它们进行了不同的命名，并且代码要求它们的名称 - 为什么我不能同时显示它们？ (抱歉，我刚刚开始接触这些东西。)

谢谢大卫

Answer 1

您定义了两个同名的变量，这导致变量相互干扰。重命名它们可以修复它。

https://jsfiddle.net/nhctucg6/32/

var currentFirst = '';
$('[name="first_inputs"]').change(function() {
    if(currentFirst.length) 
        $('#' + currentFirst).slideUp();
    currentFirst = $(this).val();
    $('#' + $(this).val()).slideDown();
});

var currentSecond = '';
$('[name="second_inputs"]').change(function() {
    if(currentSecond.length) 
        $('#' + currentSecond).slideUp();
    currentSecond = $(this).val();
    $('#' + $(this).val()).slideDown();
});