jQuery-使用收音機在一頁上進行多個幻燈片顯示

Question

我正在嘗試將多個幻燈片放到頁面上。 我必須使用收音機作為觸發。 我不能同時顯示兩者，一個關閉另一個！ 請看這個小提琴。

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