簡化我的JQuery代碼

-1

我試圖簡化我的代碼，但我不知道如何正確地做到這一點。正如你可以在下面看到的，我的函數聲明對於所有3都是一樣的，但是我爲它們做了這個。看起來我應該能夠在它變得太多之前做些什麼，但我不確定如何做到這一點。簡化我的JQuery代碼

function idone() { 
    $('#id1').on('click', function() { 
    var newclass = $(".f1").attr("class"); 
    var oldclass = $("#photo").attr("class"); 
    $("#photo").fadeOut(function() { 
     $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow'); 
    }); 
    }); 
} 

function idtwo() { 
    $('#id2').on('click', function() { 
    var newclass = $(".f2").attr("class"); 
    var oldclass = $("#photo").attr("class"); 
    $("#photo").fadeOut(function() { 
     $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow'); 
    }); 
    }); 
} 

function idthree() { 
    $('#id3').on('click', function() { 
    var newclass = $(".f3").attr("class"); 
    var oldclass = $("#photo").attr("class"); 
    $("#photo").fadeOut(function() { 
     $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow'); 
    }); 
    }); 
}

來源

2014-04-08 Iditarod1973

你真的應該重做你的問題的格式。在這種狀態下它是不可讀的。 –

@Khan：感謝您設置問題的格式。 –

與IDS調用它，在元素添加一個類還有：

<div class="divs" id="id1"></div> 
<div class="divs" id="id2"></div>

，並在您f1類元素添加ID爲好，假設它們是跨度：

<span class="fid1"></span>

然後寫的jQuery這樣的：

$('.divs').on('click', function() { 
    var newclass = $('.f'+this.id).attr("class"); 
    var oldclass = $("#photo").attr("class"); 
    $("#photo").fadeOut(function() { 
     $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow'); 
    }); 
    });

來源

2014-04-08 17:22:46

儘管我的答案可以解決現有問題，但這是一個更好的通用解決方案。 – Adam

如果你點擊'id1'，新類將是'$（「。f1」）。attr（「class」）'類。但是當你點擊'id2'時，新類是'$（「。f2」）。attr（「class」）'類。在你的情況下，它將是'$（「。f1」）。attr（「class」）' – Unknown

讓我更新.. –

function id(number) { 
    $('#id' + number).on('click', function() { 
    var newclass = $(".f" + number).attr("class"); 
    var oldclass = $("#photo").attr("class"); 
    $("#photo").fadeOut(function() { 
     $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow'); 
    }); 
    }); 
}

然後用id(number);

來源

2014-04-08 17:20:47 Adam

在這裏，你能做些什麼：

$('[id^=id]').on('click', function() { 
    var classToToggle = $(".f"+this.id.replace(/[^\d]/g,'')).attr("class") + ' ' + $("#photo").attr("class"); 
    $("#photo").fadeOut(function() { 
     $("#photo").toggleClass(classToToggle).fadeIn('slow'); 
    }); 
});

來源

2014-04-08 17:33:12

簡化我的JQuery代碼

回答

相關問題