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

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

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

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

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: Остановка текущего аудио плеера, при включении другого

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

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

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. Именно первый вариант является правильным....

jQuery: Как заменить класс у элемента

Библиотека JS
Для замены класса будем использовать две функции:
  • removeClass: Удаляет класс или классы, что были указанны.
  • addClass: Добавляет указанный класс элементу.

Допустим элемент div#taskInfo имеет класс displayNone, который нам необходимо заменить на displayInlineBlock: 
<div id="taskInfo" class="displayNone"></div>

Делаем так: 
$('#taskInfo').removeClass('displayNone').addClass('displayInlineBlock');

Предварительно стоит проверить наличие класса, что необходимо заменить: 
if ($('#taskInfo').hasClass('displayNone')) {
	$('#taskInfo').removeClass('displayNone').addClass('displayInlineBlock');
};
...

jQuery: Как проверить блок на пустоту

Библиотека JS
Появилась необходимость проверить блок на пустоту, то есть есть ли в нём какие либо теги или нет. Ниже, как это можно сделать.

Допустим есть у нас такой блок (Без тегов внутри него): 
<div id="blockID"></div>

Его та нам и надо проверить. Для этого используем следующее условие: 
if ($('#blockID').html().trim() == '') {
	// Блок пустой | Действие при пустом блоке
}

ID или другой атрибут блока (blockID) пишите свой....

jQuery: проверка наличие элемента в массиве

Библиотека JS
Для проверки элемента в массиве в библиотеку jQuery добавлена функция jQuery.inArray(): 
if (jQuery.inArray('js', ['js', 'jQuery']) > -1) {
    // Элемент существует в массиве
};

Вместо: jQuery.inArray можно писать: $.inArray....
Реклама