Как присваивать в сразу несколько значений через запятую?

Приветствую, тосторовчане. Я пытаюсь по клику на элемент, записывать в инпут определенные значения, но получается пока только одно, как вписать сразу и .item-name и .item-structure итд ?

<div class="item-description">
                                <div class="item-name">Название</div>
                                <div class="item-structure">Описание</div>
                                <span class="item-weight">Вес</span>
                                <span class="item-price">Цена</span>
                                <div class="item-add">Добавить</div>
                            </div>

<input class="items-cart" type="text">


Вот что я делаю:

$('.item-add').click(function() {
                    $('.items-cart').attr('value', $(this).closest('.item-description').find('.item-name').text());
                });


Надо, разумеется, чтобы добавлялся не только .item-name, но и значения остальных блоков.
В итоге должно получиться как-то так:

<input type="text" value="имя описание вес цена">
  • Вопрос задан
  • 1421 просмотр
Решения вопроса 1
rmaksim
@rmaksim
совсем не обязательно все свойства собирать одной строкой, можно же и отдельно )
а потом просто объединить "пробелом" как-то так
$('.item-add').click(function() {
    var $desc   = $(this).closest('.item-description')
      , t_name  = $desc.find('.item-name').text()
      , t_price = $desc.find('.item-price').text()
      , ...
    $('.items-cart').attr('value', [t_name, t_price].join(" "));
});

а можно написать небольшой "сборщик" полей и потом просто указывать нужные, например вот так
$('.item-add').click(function() {
    $('.items-cart').attr('value', get_items($(this), "name structure weight price", " "));
})

function get_items($el, fields, separator) {
    var $desc = $el.closest('.item-description')

    return ($.map(fields.split(" "), function(field_name){
        return $desc.find(".item-" + field_name).text()
    })).join(separator)
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@asdz
начинай с корневого элемента и последовательно проходи по его потомкам

$(this).closest('.item-description').find('item-description').text().end().find('item-structure').text().end().....
Ответ написан
@kondaurov
Full stack developer
Вы не знакомы с js фреймворками? Angular например. Что то мне кажется у вас получится спагетти js с этим jquery
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы