jquery點擊發射所有元素

我試圖使用Bootstrap的摺疊功能與自定義圖標從字體真棒。我能夠崩潰工作，但我遇到的問題是所有的圖標都是由Jquery的點擊觸發的，我想擴大這個範圍，因爲在任何時候「容器」的數量都可以改變。任何建議表示讚賞。jquery點擊發射所有元素

$(document).ready(function() { 
    $faChevronDown = $('.fa-chevron-down'); 
    var z = 0; 
    $faChevronDown.click(function() { 
     if (z == 0) { 
      turnUp(); 
      z++; 
     } else { 
      turnDown(); 
      z = 0; 
     } 
    }); 
}); 

function turnUp() { 
    $faChevronDown.removeClass('fa-chevron-down'); 
    $faChevronDown.addClass('fa-chevron-up'); 
}; 

function turnDown() { 
    $faChevronDown.removeClass('fa-chevron-up'); 
    $faChevronDown.addClass('fa-chevron-down'); 
};

JS Fiddle

謝謝編輯：謝謝你的偉大的答案！僅適用於開關類fa-chevron-down和fa-chevron-up，該代碼

$(document).ready(function() { 
    var z = 0; 
    $("body").on("click", ".fa-chevron-down", function() { 
     if (z == 0) { 
      turnUp.call(this); 
      z++; 
     } else { 
      turnDown.call(this); 
      z = 0; 
     } 
    }); 
}); 

function turnUp() { 
    $(this).removeClass('fa-chevron-down'); 
    $(this).addClass('fa-chevron-up'); 
}; 

function turnDown() { 
    $(this).removeClass('fa-chevron-up'); 
    $(this).addClass('fa-chevron-down'); 
};

如果您正在使用z變量：一個.fa-chevron-down元素的父元素，或者如果父元素沒有body元素稱爲

來源

2015-03-31 Mintberry

我已經簡化爲你：https://jsfiddle.net/74t2jLcu/8/ – 2015-03-31 16:32:22

我不知道你的z變量的點是什麼，但可以減少你所擁有的，並且通過使用this固定不引用元素的問題，僅僅通過使用：

$(document).ready(function() { 
    $('.fa-chevron-down').click(function() { 
     $(this).toggleClass('fa-chevron-down fa-chevron-up') 
    }); 
});

jsFiddle example

來源

2015-03-31 16:32:00 j08691

謝謝，效果很好！編輯 - 我正在使用.toggle，直到我經歷了「爲什麼一切隱藏，哦，它已被棄用！」循環。我會在4分鐘內接受答案，看起來是最有效的方式！ – Mintberry 2015-03-31 16:32:35

如果頁面加載時由於某種原因（來自角度等的觸發器）出現V形圖案，該不會中斷嗎？編輯：是的！編輯：改爲.fa - 修復它。我可能會使用元素選擇器，因爲我在其他位置也使用了V形。 – Mintberry 2015-03-31 16:37:27

設置單擊處理程序可以簡化爲：

$(document).ready(function() { 
    $("body").on("click", ".fa-chevron-down", function() { 
     $(this).toggleClass('fa-chevron-down fa-chevron-up'); 
    }); 
});

來源

2015-03-31 16:26:02

謝謝您的輸入，不會引起這個問題時調低函數被調用？點擊可能會停止工作，因爲.fa-chevron-down被選中並且不可用。 – Mintberry 2015-03-31 16:30:48

@Dnwebdev請檢查更新的答案 – 2015-03-31 16:33:05

謝謝，現在就像一個魅力！ – Mintberry 2015-03-31 16:34:22

您可以將元素傳遞給執行粒度來回切換，

$(document).ready(function() { 
    $fa= $('.fa'); 
    var z = 0; 
    $fa.click(function() { 
     if (z == 0) { 
      turnUp($(this)); 
      z++; 
     } else { 
      turnDown($(this)); 
      z = 0; 
     } 
    }); 
}); 

function turnUp(el) { 
    el.removeClass('fa-chevron-down'); 
    el.addClass('fa-chevron-up'); 
}; 

function turnDown(el) { 
    el.removeClass('fa-chevron-up'); 
    el.addClass('fa-chevron-down'); 
};

來源

2015-03-31 16:28:08 ferr

感謝您的意見，這似乎工作，直到你關閉一個，然後打開另一個，我相信選擇器之後失去。 – Mintberry 2015-03-31 16:32:03

我看到了，你正在移除fa-chevron-down類，它是click事件綁定的地方。我會建議綁定一個你正在添加/刪除的類。您可以綁定到.fa並繼續在別處使用V形類。我會更新。 – ferr 2015-03-31 16:35:37

你點擊只有一個元素，但你的功能就是把所有的圖標，你必須使用$（本）中，而不是爲了只更改圖標你點擊：

function toggleClass() { 
    $(this).toggleClass('fa-chevron-down fa-chevron-up'); 
};

，然後只用一個功能：

$faChevronDown.click(toggleClass);

有了這個，您可以避免使用Ifs和elses，代碼更簡單和小巧。

來源

2015-03-31 16:28:33 taxicala

jquery點擊發射所有元素

回答

相關問題