Новые ответы с меткой jquery
0
Ну, вот как-то так
let arr = ['a', 'b', 'c', 'd'];
function flip(){
let i = 0;
$('.parent').each(function() {
$(this).addClass('isFlipped').find('.second').text(arr[i]);
i++;
})
}
.parent{
position: relative;
transform-style: preserve-3d;
transform-origin: center left;
transition: transform 1s;
width: 40px;
height: 40px;
...
2
Не ясно, конечно, откуда и какой текст должен вставляться в ячейки. Почему буквы, сколько их должно быть?
Но для примера код на jquery будет такой.
Если уточните задание, поправим.
P.S. почему ссылка, а не кнопка?
let arr_en = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']...
1
$(".delete_comment button").click(function(){
console.log($(this).closest(".delete_comment").find("input").val());
});
3
Вопрос: Как при изменении размеров родительского элемента,
пропорционально изменять размеры дочернего элемента? Дочерний элемент
должен быть полностью адаптивный квадрат, и при любых изменениях высоты или ширины родительского элемента, дочерний элемент - квадрат -
должен всегда оставаться квадратом. Какие есть варианты решения этой
задачи?
Короткий ответ:
...
ответ дан 6 часов назад
Alexandr_TT
84.9k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
0
Обернул скирпт ready и заработало.
$(document).ready(() => {
$('[redirect]').on('click', function () {
let direct = this.getAttribute('redirect');
core.mount(direct);
});
$('[click]').on('click', function (e) {
console.log(e);
let methodName = this....
2
Звездочка зачем? Вообще, я бы более точный селектор на твоём месте выдумал 👍 (тем более, если html твой)
$('[redirect]').on('click', ({currentTarget, target})=>{
const direct = currentTarget.getAttribute('redirect');
const direct2 = target.getAttribute('redirect');
console.log('redirect:', direct, direct2);
});
$('[click]').on('click', ({...
3
Имхо, самое короткое и правильное решение... в будущем... Ибо пока поддержка такого замечательного свойства, как aspect-ratio, оставляет желать лучшего. Но, в Chrome и Edge действительно уже работает "на ура". В общем, как вариант:
#parent {
width: 140px; height: 140px;
padding: 10px; overflow: hidden;
border: 5px solid red; resize: both;
...
0
Суть проста:
Перед отправкой ajax запроса - показываем анимацию загрузки
При success - убираем анимацию загрузки и вставляем данные (отображаем данные).
В методе $.ajax() есть даже вспомогательный callback под названием beforeSend, где можно как раз показать анимацию. Ну а у $.get только перед ним самим
ответ дан 21 час назад
Алексей Шиманский
44.2k77 золотых знаков6464 серебряных знака130130 бронзовых знаков
0
Проблема была в асинхронности. Объект менялся во время вывода.
3
Отдельным ответом добавлю ещё один вариант, в котором мы будем менять у родительского элемента только высоту height, а у дочернего элемента только ширину width. При этом у нас всё также дочерний элемент должен пропорционально изменять свои размеры и всегда оставаться полностью адаптивным квадратом.
function parentH() {
let height = document....
ответ дан 22 часа назад
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
3
Подобный вопрос довольно часто встречается на ruSO. Поэтому мне кажется, что будет не лишним добавить готовое и полностью рабочее решение, которое может оказаться в будущем для многих пользователей полезным.
Вот один из вариантов такого решения поставленной задачи, с помощью JavaScript кода и с использованием переменных в CSS:
function parentH() {
let ...
ответ дан 23 часа назад
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
console.log(
'/img/photo/23.02.21/acura_1.jpg'.replace(/(^.*[\\\/]+)|(_[^_]+$)/g, '')
)
console.log(
'acura_1.jpg'.replace(/(^.*[\\\/]+)|(_[^_]+$)/g, '')
)
console.log(
'\\\/\\\/acura_sacura_158.jpg'.replace(/(^.*[\\\/]+)|(_[^_]+$)/g, '')
)
1
Повторюсь, нужно чтобы от слова "текст" до цифр шли точки как на
скриншоте... Подходит решение как на чистом CSS, так и на JS и JQuery.
Судя по вашему вопросу, я так полагаю, мы можем воспользоваться любыми средствами, но мы не можем трогать разметку HTML. В таком случае вот вам решение на JS + незначительные дополнения к вашему CSS (не нарушая ...
0
Основная ошибка в том, что сериализуется строка.
Так как в строке присутствуют кавычки, они сериализуются соответствующим способом, а именно с добавляением специ символа, для экранирования.
Для решения достаточно либо убрать ненужный в данном случает JSON.stringify
var date = document.getElementById("data");
var formated = document.getElementById("...
0
Задача решена.
const tooltip = ( id ) => {
jQuery('div.woocommerce').on( 'click', `#tooltip_btn_${id}`, function() {
productID = jQuery(`#product-name__tooltip_${id}`).attr("data-product_id");
let code_input = jQuery(`#tooltip_btn_${id}`).attr("data-index_value"); ...
1
Можт быть, вот так?)
td {
vertical-align: bottom;
}
<table>
<tr>
<td>Некоторый текст</td>
<td>............</td>
<td>10</td>
</tr>
</table>
ответ дан 2 дня назад
Stepan Kasyanenko
8,45011 золотой знак1111 серебряных знаков2525 бронзовых знаков
2
Все куда проще, даже без js можна сделать:
<form id="form" action="">
<input id="checkbox1" type="checkbox">
<input id="checkbox2" type="checkbox">
<input id="checkbox3" type="checkbox">
<input id="checkbox4" type="checkbox">
<input id="checkbox5" type="checkbox">
<input id="checkbox6" type="...
0
И я решил чтобы не искать все включенные чекбоксы и не снимать галки можно просто перезагрузить страницу.
Зря,
let cb = document.querySelectorAll('#your-box [type="checkbox"]');
document.querySelector("#btn").addEventListener("click", function() {
cb.forEach(e => e.checked = false);
});
<button id="btn">reset</button>
<div id="...
1
Решил, указывал не полный путь к файлу, и по переходу по этому файлу его перебрасывало на индексированную страницу и мне выводил код
1
что на счет этого варианта?
jQuery('div.woocommerce').on( 'click', `#tooltip_btn_${id}`, function() {
let code_input = jQuery(`#tooltip_btn_${id}`).attr("data-index_value");
let inner_code ='[name="' + code_input + '"]';
let old_value = jQuery(inner_code).val();
let new_value = parseInt(old_value)...
2
$('.dec').click(function() {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
if (count > 0) {
var countner = $('.t-count').text();
$('.t-count').text(countner / 2);
var total = $('.total-price').text();
$('.total-price').text(total / 2);
} else {
count = 1;
}
$input.val(count);
$input....
-1
Это происходит если, к примеру, скопировать блок слайдера с классами инициализации (slick-initialized slick-slider).
0
Опять в консоль выводится объект, который заполняется данными позже - как видно из пустого "keys is: [] length: 0".
var a = {k1:11, k2:22};
$.each(a, function(key, value) {
console.log("from object", key, value);
});
var b = [11, 22, 33];
$.each(b, function(key, value) {
console.log("from array", key, value);
});
<script src="https://...
0
$('.page-header__menu-item').hover(function () {
}, function () {
$(this).find('a').removeClass('active');
});
$('.page-header__menu-item a').click(function (e) {
if ($(this).parent().hasClass('have_submenu')) {
let width = $(window).width();
if (width <= 1210) {
$('.page-header__menu-item a').not($(this)).removeClass(...
0
Проблема решилась с помощью обнуления маржинов для .slick-list.
1
Можно взять его значение text
$(document).on('click', '.gift-certificate-download__action-btn-copy', function() {
alert($(this).text());
});
.gift-certificate-download__action-btn-copy {
margin-right: 8px;
border: 1px solid #000;
border-radius: 4px;
padding: 6px 20px;
box-sizing: border-box;
font-...
ответ дан 3 мар в 14:41
Алексей Шиманский
44.2k77 золотых знаков6464 серебряных знака130130 бронзовых знаков
0
$('.parent').click(function(){
if($(this).find('.child').text() == 5){
$('.modal').fadeIn();
$('.hiddenblock').css('display', 'block');
}
});
0
$('#shipping_address_country').on('change', function() {
let phone = $("#client_phone"),
mask = '';
switch($(this).val()) {
case 'PT':
mask = "+20(999) 999-9999";
break;
case 'ES':
mask = "+31(999) 999-9999";
break;
default:
mask = "+75(999) 999-9999";
break;
}
phone.mask(mask);
}).change(...
0
Такое?
$('.list').on('click', 'li', function() {
$(this).closest('.list').find('li').removeClass('active');
$(this).addClass('active');
});
li {
cursor: pointer;
}
li.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="list">
<li>1</li>
...
ответ дан 3 мар в 13:19
Алексей Шиманский
44.2k77 золотых знаков6464 серебряных знака130130 бронзовых знаков
0
Вам это нужно было?
Если да, то вот объяснение:
Если у вас есть определенный класс, который у нескольких элементов, то следует пользоваться функцией jQuery closest(), чтобы обратиться именно к конкретному элементу (в данном случае кнопка). Для обращений к родителю есть функция parent().
$('.top').click(function(e) {
$('span.active').not(this)....
0
$(".woosb_r").on('click', '.woosb-qty-input-plus', function () {
let parent = $(this).parents(".woosb_r");
parent.addClass('edited');
parent.find('.woosb-price-ori ins').addClass('ed');
}).on('click', '.woosb-qty-input-minus', function () {
let parent = $(this).parents(".woosb_r");
parent.removeClass('edited');
parent.find('.woosb-...
1
Что-то такое нужно?
$('.top').click(function() {
$(this).toggleClass('active');
$(this).prev('ul').toggleClass('active-top');
$('.top').not(this).removeClass('active');
$('.menu-dropdown-top').not($(this).prev('ul')).removeClass('active-top');
});
.active {
color: red;
}
.active-top {
color: green;
}
<script src="https://...
ответ дан 2 мар в 18:48
Алексей Шиманский
44.2k77 золотых знаков6464 серебряных знака130130 бронзовых знаков
0
function burgerMenu(selector) {
let menu = document.querySelector(selector);
let button = menu.querySelector('.burger-menu_button');
let lines = menu.querySelector('.burger-menu_lines');
let links = menu.querySelector('.burger-menu_link');
let overlay = menu.querySelector('.burger-menu_overlay');
let body = document.querySelector('...
1
Примерно можно сделать так
let div = $('#response');
let count = $('.slider__item', div).length;
или так
let count = $('#response > .slider__item').length;
$('#add').on("click", ()=> {
let element = document.createElement("div"); // Create with DOM
$(element).addClass("slider__item");
$(element).text("Text");
$('#response').append(...
2
Не вижу смысла в обилии функций, вместо того, чтобы использовать нативные средства:
$('.foot-form').on('focusout', function() {
$(this).find('.foot-form-hidden').toggleClass("not-empty", ($(this).find("input").val() + $(this).find("textarea").val() != ''));
});
.foot-form-hidden { transform-origin: top; transform: scaley(0); transition: .3s ease; }
....
2
На JQuery:
$(".woosb_r").on('click', '.woosb-qty-input-plus', function () {
$('.woosb_r, .woosb-price-ori').addClass('edited');
});
$(".woosb_r").on('click', '.woosb-qty-input-minus', function () {
$('.woosb_r, .woosb-price-ori').removeClass('edited');
});
3
Я вижу, что у вас проблема в том, что двойные кавычки находятся в двойных кавычках. Либо внутри используйте одинарные (или экранирование: обратный слэш), либо всю конструкцию оберните в одинарные.
Подход, который получше:
Если вам надо вывести форматированный html, а в кавычках это невозможно сделать, то используйте шаблонные строки:
https://developer....
ответ дан 1 мар в 9:36
Алексей Шиманский
44.2k77 золотых знаков6464 серебряных знака130130 бронзовых знаков
1
Если на JS делать то можно так
clear.addEventListener("click", ()=>{
sidemenu.innerHTML = "";
})
clearItems.addEventListener("click", ()=>{
var items = sidemenu.getElementsByTagName("li");
[...items].forEach(item => item.innerHTML = "");
})
<ul id="sidemenu">
<li>
<div class="leftside">
<i class="fa ...
2
$('#sidemenu').html(''); // Jquery
document.getElementById('sidemenu').innerHTML = ''; // vanillaJS
ul {
border: 1px solid black;
height: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul id="sidemenu">
<li>
<div class="leftside">
<i class="fa fa-home">&...
ответ дан 1 мар в 8:24
Алексей Шиманский
44.2k77 золотых знаков6464 серебряных знака130130 бронзовых знаков
1
$('document').ready(function() {
$('.btn-delete').click(function(e) {
console.log($(this).data('user-id'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<button class="btn btn-delete popup-open" data-user-id="<?= $user['id']; ?>" >Удалить</button&...
0
Во-первых, поменяйте $('#btn-delete') на $('.btn-delete').
Во-вторых, попробуйте следующий код:
$('document').ready(function() {
$('.btn-delete').click(function(e) {
console.log($(e.current).data('user-id'));
});
});
Либо
$('document').ready(function() {
$('.btn-delete').click(function(e) {
console.log($(e.currentTarget).data('...
0
Используйте метод slickGoTo. индексация слайдов с 0.
$(function(){
$("#slider").slick({
arrows: false,
});
$(".x").click(function(e){
e.preventDefault();
$("#slider").slick("slickGoTo", $(this).data('to'));
});
});
#slider > div {
text-align: center;
font-size: 4rem;
font-weight:bold;
padding: 2rem;
...
2
Мало кода - не всегда хорошо :) Тем не менее,
[0, 5], [5, 8], [8, 10] сократил до → [0, 5, 8], на каждой итерации можно взять текущий элемент массива и i + 1-й, будут получаться те же пары.
Надо заметить, что на последней итерации i + 1-й элемент будет undefined.
.slice(8, undefined) равнозначен .slice(8) и дает элементы от 8 до конца. Поэтому это не баг, а ...
ответ дан 27 фев в 23:02
OPTIMUS PRIME
23.5k33 золотых знака1616 серебряных знаков4141 бронзовый знак
2
Метод .append есть у элемента. Соответственно нужно этот элемент сначала получить. document.body доступен всегда глобально, поэтому его получать не нужно. А в вашем случае нужно сделать так:
document.querySelector('.woosb-products').append(div);
, где document.querySelector('.woosb-products') возвращает элемент.
ответ дан 27 фев в 21:17
Pavel Grishaev
3,12511 золотой знак33 серебряных знака1414 бронзовых знаков
1
Кнопку показать еще не могу вставить в разметку <div id="more">Показать ещё</div>, я могу это сделать только через
.slider:after { content: "Показать еще"; }
Если нет возможности вносить изменения в HTML, то можно же создать новый элемент (кнопку) посредством JavaScript. И фактически она у нас будет в HTML-документе. Пример:
...
ответ дан 26 фев в 15:37
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
3
Вешать клик на option - плохая идея. Лучше отслеживайте событие change у select:
$('.select-block').on('change', function(){
let dest = $(this).val();
if (dest !== undefined && dest !== '') {
$('html').animate({
scrollTop: $(dest).offset().top
}, 1000);
}
return false;
});
.block1 {
width: 100%;
height: 30em;
...
ответ дан 26 фев в 12:32
humster_spb
11.3k11 золотой знак1515 серебряных знаков3939 бронзовых знаков
0
Так?
$('.list-item').click((event) => {
// const imgId = event.currentTarget.getAttribute('data-id');
const imgSrc = event.currentTarget.querySelector('img').getAttribute('src');
parag.innerHTML = `<img src="${imgSrc}">`;
document.getElementById('modalContent').insertAdjacentElement('afterbegin', parag)
});
0
Подозреваю, что элемент находится в iframe. Когда вы просто открываете консоль, она работает в контексте главного окна. Но если вы щелкните на элементе внутри iframe, посмотрите его в дереве элементов, а потом переключитесь в консоль, она тоже переключит контекст на этот фрейм. Над полем ввода консоли находится ниспадающий список всех возможных контекстов. ...
ответ дан 25 фев в 23:21
vsemozhebuty
8,47222 золотых знака77 серебряных знаков1515 бронзовых знаков
0
Решил удалением экземпляра перед его инициализацией:
$('input.typeahead').typeahead('destroy');
0
Пишу с телефона, по этому не уверен в правильности:
document.body.addEventListener('DOMNodeInserted', (e) =>
{
if (e.target.id == 'msg-input')
{
e.target.value += 12;
}
});
50 лучших ответов включены
Связанные метки
jquery × 19376javascript × 13325
html × 4485
css × 2976
ajax × 2059
php × 1806
json × 472
html5 × 419
bootstrap × 349
css3 × 339
jquery-ui × 328
wordpress × 266
вёрстка × 210
веб-программирование × 191
slider × 165
анимация × 163
slick.js × 163
scroll × 157
dom × 144
массивы × 142
form × 142
mysql × 140
svg × 138
input × 119
события × 117