Фильтр в jQuery

345
04 июня 2017, 21:53

Все привет. Длительное время мучаюсь с одной проблемой, в данныый момент решаю ее следующим образом

 $('.sect_9 .items .item:first .mortgage').click(function() {
    $('.mortgages input[name="statistics"]').val($('.sect_9 .items .item:first .up').text());
});
$('.sect_9 .items .item:eq(1) .mortgage').click(function() {
    $('.mortgages input[name="statistics"]').val($('.sect_9 .items .item:eq(1) .up').text());
});
$('.sect_9 .items .item:eq(2) .mortgage').click(function() {
    $('.mortgages input[name="statistics"]').val($('.sect_9 .items .item:eq(2) .up').text());
});
$('.sect_9 .items .item:eq(3) .mortgage').click(function() {
    $('.mortgages input[name="statistics"]').val($('.sect_9 .items .item:eq(3) .up').text());
});

Как можно видеть при клике на кнопку с классом mortgage первого айтема должно вписываться значения класса up в скрытый input формы с первого айтема, а при клике на кнопку второго айтема, должно браться значения класса up опять же второго айтема. Если же я данные фильтры уберу (в данном случае это :first, :eq(1), :eq(2), :eq(3), то тупо при клике на кнопку любого айтема в форму будут записываться значения всех айтемов, которые есть в корне. А мне естественно надо, чтобы при клике допустим на кнопку 3 айтема бралось значения класса up с 3 айтема, а не со всех возможных 4 как в данном случае. Как это можно сделать? Заранее спасибо!!!

html разметка 1 из айтемов

      <div class="item">
                <div class="up">
                    <h3 class="h3">ТРЁХКОМНАТНАЯ КВАРТИРА</h3>
                    <span>78,41 <span>кв.м.</span></span>
                </div>
                <a href="" class="imgs onn">
                    <img src="img/sect_9/3K-78.41.jpg" alt="Планировка">
                </a>
                <div class="info_9">
                    <span class="old">3.200.000</span>
                    <div class="wraps">
                        <span class="left">ЦЕНА ЗАСТРОЙЩИКА:</span>
                        <span class="right_9">3.000.000 <span>руб.</span></span>
                    </div>
                    <div class="wraps">
                        <span class="left">В ИПОТЕКУ:</span>
                        <span class="right_9">15.348 <span>руб./месяц</span></span>
                    </div>
                    <div class="wraps">
                        <span class="left">ОСТАЛОСЬ КВАРТИР:</span>
                        <span class="right_9">4<span>шт.</span></span>
                    </div>
                </div>
                <a href=".question" class="book">
                    <b>задать вопрос<br> или забронировать</b><span>ЗАФИКСИРУЙТЕ ЦЕНУ СЕЙЧАС</span>
                </a>
                <a href=".mortgages" class="mortgage">
                    <b>РАССМОТРЕТЬ В<br> ИПОТЕКУ</b><span>БЕСПЛАТНАЯ ЗАЯВКА НА РАССМОТРЕНИЕ</span>
                </a>
                <a href=".subscribs" class="subscribe">ПОДПИСАТЬСЯ НА ИЗМЕНЕНИЕ ЦЕНЫ НА ЭТУ КВАРТИРУ</a>
                <p class="text_p">Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, </p>
            </div>

А здесь html разметка формы

<form class="mortgages">
    <h3 class="h3">Бесплатное рассмотрение ипотеки</h3>
    <p>Высокий процент одобрения за счет индивидуального подхода.</p>
    <div class="up_m">
        <input type="text" name="fio" placeholder="ФИО полностью:" required>
        <input type="text" name="age" placeholder="Возраст:" required>
        <input type="text" name="mail" placeholder="Электронная почта:" required>
        <input type="text" name="phone" placeholder="Сотовый телефон:" required>
    </div>
    <div class="down_m">
        <input type="text" name="job" placeholder="Место работы:" required>
        <input type="text" name="familyStatus" placeholder="Семейное положение:" required>
        <input type="text" name="post" placeholder="Должность:" required>
        <input type="text" name="firstPayment" placeholder="Размер первоначального взноса:" required>
        <input type="text" name="averageIncone" placeholder="Среднемесячный доход:" required>
    </div>
        <div class="checkk">
            <input type="checkbox" name="Да, я могу подтвердить доход справкой 2НДФЛ"><span class="book_f">Да, я могу подтвердить доход справкой 2НДФЛ</span>
        </div>
        <div class="checkk">
            <input type="checkbox" name="Нет, я не могу подтвердить доход справкой 2НДФЛЛЛ"><span class="book_f">Нет, я не могу подтвердить доход справкой 2НДФЛЛ</span>
        </div>
        <button class="btn">Отправить</button>
        <input type="hidden" name="project_name" value="ЖК Комарово">
        <input type="hidden" name="statistics" value="Рассмотреть в ипотеку">
        <input type="hidden" name="admin_email" value="yaforsmen@yandex.ru">
        <input type="hidden" name="form_subject" value="Новая заявка с сайта">
</form>
Answer 1

Понятно вопрос уже, вот как можно сделать.

$('.sect_9 .items .item .mortgage').click(function() {
    var tmp_val = $(this).parent().find('.up').text();
    $('.mortgages input[name="statistics"]').val(tmp_val);
});

Подробно объясню:

Вешаем один обработчик для всех классов mortgage, и поскольку родитель нужного нам тега с классом up и тег mortgage один и тот же, то мы во время клика ищем родителя для текущего элемента потом в нем элемент up и таким образом всегда получаем нужный нам результат.

Answer 2

Делайте следующим образом, в цикле перебирайте все .item и в контексте каждого навешивайте событие клика:

$('.sect_9 .items .item').each(function(index, item) {
    $(item).find('.mortgage').on('click', function() {
        $('.mortgages input[name="statistics"]').val($(item).find('.up').val());
    });
});
READ ALSO
Изменять текст под input на React

Изменять текст под input на React

Как реализовать такую задачуУ нас есть input, под ним к примеру слово Hello введенные символы в input должны динамически добавляться после Hello

411
$(&hellip;).datepicker is not a function [требует правки]

$(…).datepicker is not a function [требует правки]

Добрый день, Мучаюсь уже часа 3, не могу понять в чем ошибка, на 1 сайте все работает, скопипастил - не работает, помогите разобраться в чем ошибка...

286
Индексатор на typescript

Индексатор на typescript

В моем классе есть индексатор this[key] = value ну как в словареКак сделать геттер и сеттер на индексатор, чтоб на пример key перед тем как получить...

459
Vue js переопределение константы

Vue js переопределение константы

я ожидаю что применится дефолтное значение, а на этом этапе данные что я ввел

229