const select = $('#sort_sel');
select.find('option:not(:first-child)').sort(function(a, b) {
var sa = a.textContent.toLowerCase(),
sb = b.textContent.toLowerCase();
return sb < sa ? 1 : sb > sa ? -1 : 0;
}).appendTo(select);
select.find('option:not([value=""])')
var str = `<div draggable="true" onclick="return false;" id="item_col-2" class="layout_el wtf col-2 gap">
<div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">123</div>
<div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">321</div>
</div>`;
// Допустимые классы
const allowClasses = new Set(['col-2', 'gap', 'g-grid']);
const wrapper = document.createElement('div');
wrapper.innerHTML = str;
wrapper.querySelectorAll('*').forEach(el => {
[...el.attributes].forEach(attr => {
if (attr.name !== 'class') {
el.removeAttribute(attr.name);
} else {
[...new Set(el.classList)].filter(x => !allowClasses.has(x)).forEach(cls => {
el.classList.remove(cls);
});
}
});
});
console.log(wrapper.innerHTML);
мучаюсь второй день
document.getElementById('player').addEventListener('ended', function() {
alert('The end!');
}, false);
window.addEventListener('load', function(){
document.getElementById('preloader').style.display = 'none';
});
P.S. Не заметил тег jQuery. Раз так, то код еще проще:$(window).on('load', function(){
$('#preloader').fadeOut('slow');
});
var point1 = document.getElementById('a'),
point2 = document.getElementById('b'),
line = document.getElementById('c');
document.addEventListener('click', function() {
var x1 = point1.offsetLeft,
y1 = point1.offsetTop,
x2 = point2.offsetLeft,
y2 = point2.offsetTop,
width = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
angle = Math.atan2(y1 - y2, x1 - x2) / Math.PI * 180;
angle = (angle < 0) ? angle + 360 : angle;
line.style.cssText = 'transform: rotate(' + angle + 'deg); top: ' + (y2 + 25) + 'px; left: ' + (x2 + 25) + 'px; width: ' + width + 'px';
});
это я к тому, что аккордеон вроде не подходитПодходит
$('dt').click(function() {
$(this).next().slideToggle( "slow" );
});
.scroll-left {
overflow-x: scroll;
width: 100vw;
}
document.querySelector('bottom').addEventListener('click',function(){
document.querySelector('div').classList.toggle('scroll-left');
// или .classList.add('scroll-left'); для разовой операции
}, false);
document.addEventListener('DOMContentLoaded', function() {
var li = document.querySelectorAll('li');
li[Math.floor(Math.random() * li.length)].style.display = 'list-item';
}, false);
$(function() {
var li = $('li');
li.eq(Math.floor(Math.random() * li.length)).show();
});
if (данные счетчика хранятся в БД || файле ) {
отправляем ajax-запрос || обычный запрос на сервер;
увеличиваем значение на 1 в хранилище;
} elseif (счетчик для каждого клиента свой && данные необходимо хранить на клиенте) {
используем localStorage/sessionStorage || cookie;
} else {
// а тут бы неплохо уточнить, что и как у вас построено
}
Если же техническая сторона вопроса, то рассказывайте, что не получается var textarea = [].slice.call(document.querySelectorAll('textarea'));
[].forEach.call(document.querySelectorAll('[type=radio]'), function(el, i) {
(function(index) {
textarea[index].style.display = el.checked ? 'inline' : 'none';
el.addEventListener('change', function() {
textarea.forEach(function(ta, i) {
ta.style.display = i === index ? 'inline' : 'none';
});
});
}(i));
});
<input type="radio" name="group">
<textarea placeholder="Окно ввода для первой radio кнопки"></textarea>
<input type="radio" name="group">
<textarea placeholder="Окно ввода для второй radio кнопки"></textarea>
textarea {
display: none;
}
[type=radio] {
float: left;
}
[type=radio]:checked + textarea {
display: inline;
}
var fakeBg = $('#fake_bg').height($(document).height());
$(window).on('scroll', function(){
fakeBg.css('margin-top', -$(this).scrollTop());
});
var start = 0,
comments = $('.otziv');
$('.showmore').on('click', showPart).click();
function showPart() {
comments.slice(start, start += 5).show();
$(this)[comments.filter(':hidden').length ? 'show' : 'hide']();
}
ручками добавляетсяОднако, прогресс :)
$(document).on('click', '.button-delete-row', function(e) {
// body...
e.preventDefault();
$(this).closest('.select-row').hide();
});
Вместо document, желательно указать ближайший родительский элемент, который был сразу при загрузке DOM. function getStyle(el, styleProp) {
var currentDisplay = el.style.display,
val = null;
el.style.display = 'none';
if (el.currentStyle) {
val = el.currentStyle[styleProp];
} else if (window.getComputedStyle) {
val = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
}
el.style.display = currentDisplay;
return val;
}
console.log(getStyle(document.querySelector('div'), 'left')); // 10%
var mq = window.matchMedia('screen and (min-width: 900px)');
mq.addListener(foo);
function foo(mq) {
if (mq.matches) {
// вьюпорт больше 900px
} else {
// вьюпорт меньше 900px
}
}
foo(mq);
$(".next").click(function() {
current_fs = $(this).parent();
var hasEmpty = $('input', current_fs).css('border-color', '#ccc').filter(function() {
return $.trim($(this).val()) === '';
}).css('border-color', '#f00').length;
if (hasEmpty) {
alert('А заполнять поля за тебя Пушкин будет?');
return false;
}
// Остальной код обработчика
});
Проверку по каждому отдельному полю, с учетом необходимых требований (формат Email, кол-во символов и т.д.) - это уже сами.