Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2019, 23:43
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

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 работал именно для той кнопки, на которую нажимаешь?
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2019, 02:47
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Timurkin
Как сделать, чтобы 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, 19.09.2019 в 02:59.
Ответить с цитированием
  #3 (permalink)  
Старый 19.09.2019, 20:32
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

Malleys, Большое тебе спасибо добрый человек!)
Люблю этот форум, очень отзывчивые ребята! Буду дальше познавать JS, еще раз спасибо!)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача результата функции, другой функции Aleksandr Chirkov Элементы интерфейса 3 24.06.2017 17:32
Можно ли так использовать callback функции? Denwf Node.JS 2 14.03.2017 10:20
Добавление функции внутрь другой функции Lion_astana jQuery 9 28.12.2013 14:33
Установить имя конструктора Андрей Параничев Общие вопросы Javascript 8 17.11.2011 10:09
arguments вызвавшей функции mister_maxim Общие вопросы Javascript 4 12.10.2010 16:21