jQuery的，加上一流的步驟

我有一系列階梯式的div，每一個包含一個完成按鈕點擊它時，帶他們回默認啓動一個。這是我寫的jQuery，但是必須有更好的方法來做到這一點？jQuery的，加上一流的步驟

$(".reset1").click(function() { 
    $("#start").addClass("active"); 
    $("#step1").removeClass("active"); 
}); 
$(".reset2").click(function() { 
    $("#start").addClass("active"); 
    $("#step2").removeClass("active"); 
}); 
$(".reset3").click(function() { 
    $("#start").addClass("active"); 
    $("#step3").removeClass("active"); 
}); 
$(".reset4").click(function() { 
    $("#start").addClass("active"); 
    $("#step4").removeClass("active"); 
}); 
$(".reset5").click(function() { 
    $("#start").addClass("active"); 
    $("#step5").removeClass("active"); 
});

來源

2015-10-28 Webbly Brown

你能證明你的HTML？ –

這是這裏https://jsfiddle.net/jqbtqy2e/ –

看看什麼是重複的部分代碼，看你怎麼可以在外面拉他們到一個單一的功能。此外，您可以看看如何最大限度地減少事件數量。

對於每個reset元素，添加普通類reset並讓您的事件觸發，只要按下任何重置按鈕。你也應該看看如何利用HTML屬性 - 像data屬性，它可以read about here。所以，你必須存儲在自定義HTML階躍折射率data屬性data-reset

<div class="reset" data-reset="1">Reset Div</div> 
<div class="reset" data-reset="2">Reset Div</div> 
...etc

現在你可以減少你的JavaScript，使之更加高效，使用jQuery的data功能，讓您的階躍折射率 -

$(document).on('click', '.reset', function(){ 
    $('#start').addClass('active'); 
    $('#step' + $(this).data('reset')).removeClass('active'); 
});

有關jQuery的數據屬性的更多信息can be read here

來源

2015-10-28 15:45:17 Adjit

我認爲你錯過了這個概念超出了這個人對基本javascript /編程的理解水平之上的觀點。 OP沒有考慮到這個事實反映了這一事實。也許添加一些解釋，一些新的JavaScript可以用來理解你寫的東西？ – Tschallacka

@MichaelDibbets這是如何超過任何人的理解？事實上，我認爲你的回答比我的更困惑。但我會補充一些說明 – Adjit

這就是我所需要的。我有這個工作。我只需要100％瞭解它在做什麼。我猜$（this）指的是當前選中的步驟，im仍然在處理數據屬性。感謝這 –

必須有一個更好的辦法...

放在一個功能，方便維護，然後調用該函數在一個循環中，在您所選擇的點。例如document.ready();

function setReset(num) { 
    $(".reset"+num).click(function() { 
     $("#start").addClass("active"); 
     $("#step"+num).removeClass("active"); 
    }); 
} 

$(document).ready(function() { 
    for(var i=1; i<6; i++) { 
     setReset(i); 
    } 
});

這樣，您就可以調用這個函數任何時候你想，你想要的任何變量。

現在，我勸你還是有點了解的功能，循環和範圍，而你在它，因爲你的問題反映了缺乏規劃的基本的瞭解，可以真正幫助您這樣的未來的問題。

來源

2015-10-28 15:40:00 Tschallacka

非常誘惑downvote這個帖子由於gif動畫和最後一段的音... – apaul

什麼，提建議是不允許的？OP對編程非常清楚，僅由問題反映出來。我給他提供了可以拓寬視野的指針。天啊，爲什麼你沒有幽默感？歐普說，一定有更好的辦法。你從來沒有搜索過Google上必須有更好的方法嗎？沒有幽默感似乎 – Tschallacka

好吧，這已迅速升級，我擦乾了我的眼睛 –

如何添加reset類各reset1，reset2等元素，然後：

$(".reset").click(function() { 
    $("#start").addClass("active"); 

    // remove the word `step` from the id, could use a regex too 
    var i = $(this).attr('id').replace('step', ''); 
    $("#step" + i).removeClass("active"); 
    // return false ? 
});

來源

2015-10-28 15:41:29 martincarlin87

如果您的意思是我怎樣才能以更好的方式使用jQuery來做到這一點，首先想到的就是toggleClass ，其次是CSS attribute selectors爲你的課，如開始選擇。

檢查出來：

$(document).ready(function(){ 
    // Listen for click on all elements whose class starts with reset 
    $("[class^='reset']").click(function(){ 
     // Add/Remove the active class accordingly 
     $("#start").toggleClass("active"); 
     // Grab the element whose ID is step# 
     // The # is determined by the index of the clicked reset element 
     // The index starts at 0, so we add 1 to match the # 
     $("#step" + ($(this).index() + 1)).toggleClass("active"); 
    }); 
});

Aaaaand jsFiddle爲您的享受！

重要的是要了解toggleClass是怎麼元素的狀態會從一開始就改變。如果您必須使用添加/刪除類，那麼它的解決方案並不像開關切換那樣簡單，您可以根據條件添加/刪除類。

來源

2015-10-28 15:47:32 AGE

jQuery的，加上一流的步驟

回答

相關問題