Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

JS: Метод массива forEach()

JavaScript Функция
Метод forEach() перебирает все элементы массива. В качестве параметра используется функция, которая будет работать с каждыми элементом массива.

Пример: 
const n = [1, 2, 3, 4, 5]

n.forEach(function(num) {
	alert(num);
});
...

Остановка текущего воспроизведения, при включении другого проигрывателя

JavaScript Библиотека JS
Стояла задача: Поставить на паузу аудио проигрыватель, что играет в данный момент, при включении другого проигрывателя. Решение было найдено в интернете, выглядит чистый JS так: 
// Остановка текущего аудио плеера, при включении другого
window.addEventListener('play', function(unit) {
    if (window.playing && window.playing != unit.target) {
        window.playing.pause();
    };

    window.playing = unit.target;
}, true); // End: Остановка текущего аудио плеера, при включении другого

jQuery выглядит так: 
// Остановка текущего аудио плеера, при включении другого
$('audio').on('play', function() {
	$('audio').not(this).each(function(index, audio) {
		audio.pause();
	});
}); // End: Остановка текущего аудио плеера, при включении другого

Опробовал. При динамическом добавлении проигрывателя, работает тоже....

Псевдокласс :hover в атрибуте style (CSS | HTML | JS)

CSS HTML JavaScript
Появилась задача изменить стиль элемента при наведении курсора и вернуть прежний стиль, когда курсор увели. Для решения этой задачи существует псевдокласс :hover, при помощи, которого можно решить задачу, но дело в том, что стиль элемента находится в атрибуте style элемента, например: 
<span style="color: #CCCCCC;">Текст</span>

В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:
  • onMouseOver - Выполняется, при наведении курсора.
  • onMouseOut - Выполняется, при выходи курсора за пределы элемента.

Делаем так: 
<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>

Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает....

JS: От модального окна дёргается страница

JavaScript
Есть у меня код, что выводит модальное окно, чтобы подтвердить или отклонить действие: 
document.addEventListener('click', function(unit) {
	var detail = unit.target;

	if (param == 'destruction') {
		if (confirm(confirmProcessDeletion)) { // Модульное окно
			// Код
		};
	};

	// Другие задачи
});

Как оказалось, после нажатия, на любою кнопку, в появившемся окошке, дёргается страница, стремительно прокручивается до самого верха.

Чтобы избавиться от дёргания страницы, внутрь условия param == 'destruction', я добавил: unit.preventDefault();: 
document.addEventListener('click', function(unit) {
	var detail = unit.target;

	if (param == 'destruction') {
		if (confirm(confirmProcessDeletion)) { // Модульное окно
			// Код
		};

		unit.preventDefault();
	};

	// Другие задачи
});

После чего дёргание исчезло....

Как правильно писать функцию в обработчике события?

JavaScript Библиотека JS
Для примера пишем функцию: display, так: 
function display(param) {
	/* Code Function */
};

Или так: 
var display = function(param) {
	/* Code Function */
};

Теперь пробуем вызывать функцию, при клике на ссылку (class="beginning"):
Первый вариант на jQuery: 
$(document).on('click', 'a.beginning', () => {
	display('cover');
});

Первый вариант на чистом JS: 
var beginning = document.querySelector('a.beginning');				
beginning.addEventListener('click',  function() {
	display('cover');
});

Или, второй вариант на jQuery: 
$(document).on('click', 'a.beginning', display('cover'));

Второй вариант на чистом JS: 
var beginning = document.querySelector('a.beginning');				
beginning.addEventListener('click', display('cover'));

Какой из вариантов, по Вашему, будет работать, а какой нет? Работать будет первый вариант, как на jQuery, так и на чистом JS. Именно первый вариант является правильным....
Реклама