this в функции
Есть простейшая функция, которая меняет стрелку на кнопке при нажатии:
$(".mybtn3").click(function(e) { if ($(this).find(".fas").hasClass('fa-angle-down')) { $(".mybtn3 .fas").removeClass('fa-angle-down').addClass('fa-angle-up'); } else if ($(this).find(".fas").hasClass('fa-angle-up')) { $(".mybtn3 .fas").removeClass('fa-angle-up').addClass('fa-angle-down'); } e.preventDefault(); }) Но этих кнопок у меня 2, и функция срабатывает сразу на обеих. Как сделать, чтобы this работал именно для той кнопки, на которую нажимаешь? |
Цитата:
addEventListener("click", event => { const parent = event.target.closest(".mybtn3") if(!parent) return; const fas = parent.querySelector(".fas"); fas.classList.toggle("fa-angle-up"); fas.classList.toggle("fa-angle-down"); }); У вас идут одни fa-angle-up и fa-angle-up и fa-angle-down и fa-angle-down... Может достаточно менять на самой кнопке стрелку ▲ или ▼? Это действительно просто и легко и не нужно писать эти ужасные захламляющие проект классы. <style> @font-face { font-family: "Up and Down"; src: url(https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/up-down.ttf); } .mybtn3 { border: none; border-radius: 0.25em; background: #248; color: white; } .mybtn3 .fas { font: 2em "Up and Down"; } </style> <button class="mybtn3"> <span class="fas">▼</span> </button> <button class="mybtn3"> <span class="fas">▼</span> </button> <script> addEventListener("click", event => { const parent = event.target.closest(".mybtn3") if(!parent) return; const fas = parent.querySelector(".fas"); fas.textContent = fas.textContent !== "▲" ? "▲" : "▼" }); </script> Учитывая, что .fas по сути стоит на месте ::before, мы можем вообще удалить этот лишний элемент! <style> @font-face { font-family: "Up and Down"; src: url(https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/up-down.ttf); } .mybtn3 { border: none; border-radius: 0.25em; background: #248; color: white; } .mybtn3::before { font: 2em "Up and Down"; content: "▼"; } .mybtn3[data-open="true"]::before { content: "▲"; } </style> <button class="mybtn3"></button> <button class="mybtn3"></button> <script> addEventListener("click", event => { const parent = event.target.closest(".mybtn3") if(!parent) return; parent.dataset.open = parent.dataset.open !== "true"; }); </script> |
Malleys, Большое тебе спасибо добрый человек!)
Люблю этот форум, очень отзывчивые ребята! Буду дальше познавать JS, еще раз спасибо!) |
Часовой пояс GMT +3, время: 03:47. |