Как передать значение из инпута в объект jQuery при событии change?

JavaScript

1 ответ

Внутри $singleDesignWrapper находится инпут. Мне нужно получить значение этого инпута при событии change и поместить его в содержимое <p class="sidebar-design-name"></p>.

Что-то похожее сделано в строке:

$('.sidebar-design-number', $element).text('Дизайн ' + (i+1));

$('.sidebar-design-number', $element).text('Дизайн ' + (i+1));

В общем, цель такова:
есть вложенные формы дизайнов, и мне нужно динамически заполнять значения в sidebar из инпута, находящегося в .field-name-field-design-name. Инпут не является прямым потомком .field-name-field-design-name.

Код:

const $singleDesignWrapper = $(       ".field--name-field-design .field--name-field-design-name"     );      $singleDesignWrapper.each(function(i) {        console.log($(this));         // Объект, куда мне нужно поместить значение           const $element =         $('&lt;div class="sidebar-designs-wrapper"&gt;n' +         '  &lt;div class="sidebar-single-design-container"&gt;n' +         '    &lt;div class="sidebar-design-number-and-name"&gt;n' +         '      &lt;p class="sidebar-design-number"&gt;&lt;/p&gt;n' +         '      &lt;p class="sidebar-design-name"&gt;&lt;/p&gt;n' +         '    &lt;/div&gt;n' +         '    &lt;p class="sidebar-garments-locations-count"&gt;&lt;/p&gt;n' +         '  &lt;/div&gt;n' +         '&lt;/div&gt;');        $('.sidebar-design-number', $element).text('Design ' + (i+1));       $sidebarDesignsWrapper.append($element);      });

const $singleDesignWrapper = $( ".field--name-field-design .field--name-field-design-name" ); $singleDesignWrapper.each(function(i) { console.log($(this)); // Объект, куда мне нужно поместить значение const $element = $('<div class="sidebar-designs-wrapper">n' + ' <div class="sidebar-single-design-container">n' + ' <div class="sidebar-design-number-and-name">n' + ' <p class="sidebar-design-number"></p>n' + ' <p class="sidebar-design-name"></p>n' + ' </div>n' + ' <p class="sidebar-garments-locations-count"></p>n' + ' </div>n' + '</div>'); $('.sidebar-design-number', $element).text('Design ' + (i+1)); $sidebarDesignsWrapper.append($element); });

console.log($(this));показывает четыре объекта.
console.log($(this).length); === 1

HTML выглядит так::

&lt;div class="sidebar"&gt;   &lt;div class="button-container current-step"&gt;&lt;/div&gt;   &lt;div class="sidebar-designs-wrapper"&gt;     &lt;div class="sidebar-single-design-container"&gt;       &lt;div class="sidebar-design-number-and-name"&gt;         &lt;p class="sidebar-design-number"&gt;&lt;/p&gt;         &lt;p class="sidebar-design-name"&gt;&lt;/p&gt;       &lt;/div&gt;       &lt;p class="sidebar-garments-locations-count"&gt;&lt;/p&gt;     &lt;/div&gt; &lt;/div&gt;  &lt;div class="main"&gt;   &lt;div class="field--name-field-design"&gt;     &lt;div class="field--name-field-design-name"&gt;       &lt;div class="js-form"&gt;         &lt;input type="text" value="hello"&gt;       &lt;/div&gt;     &lt;/div&gt;   &lt;/div&gt;   &lt;div class="field--name-field-design"&gt;&lt;/div&gt; &lt;/div&gt;

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Никита Орлов Ответ

Для передачи значения из инпута в объект jQuery при событии change, вам следует использовать метод val() для получения значения из инпута и метод text() или html() для установки этого значения в ваш объект jQuery.

Пример кода на jQuery:

$(document).ready(function() {
    $('#inputId').on('change', function() {
        var value = $(this).val();
        $('#yourObject').text(value); // или $('#yourObject').html(value);
    });
});

$(document).ready(function() { $('#inputId').on('change', function() { var value = $(this).val(); $('#yourObject').text(value); // или $('#yourObject').html(value); }); });

В данном примере #inputId - это id вашего инпута, а #yourObject - это селектор вашего объекта jQuery, куда вы хотите передать значение из инпута.

Когда значение в инпуте изменяется (событие change), мы получаем его с помощью метода val() и затем устанавливаем это значение в объект jQuery с помощью метода text() или html(), в зависимости от того, какой тип содержимого у вашего объекта.

Таким образом, вы сможете передавать значение из инпута в объект jQuery при событии change и динамически обновлять содержимое вашего объекта на странице.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Linux Как диагностировать зависание RK3568 U-boot на Starting kernel? 0 ответов

Как передать значение из инпута в объект jQuery при событии change?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно