Использовать текст элемента div в качестве заполнителя в jQuery - PullRequest
Новая
       18

Использовать текст элемента div в качестве заполнителя в jQuery

0 голосов
/ 27 марта 2019

У меня странная проблема / вызов. Плагин, который я использую, не использует реальные заполнители для своих полей ввода, но вместо этого он использует элементы div под полями ввода, и теперь они называют эти заполнители очень странными.

Так что я хотел бы манипулировать этим с помощью некоторого jQuery, это для меня новый уровень, поэтому я попробовал первые шаги. Я хотел бы видеть, что текст элемента div используется в качестве фактического заполнителя для input. Я могу явно вызывать каждый ввод с новым атрибутом и удалять div, но это составляет 20 строк кодирования для каждого отдельного ввода, я хотел бы иметь 1 решение. Для всех полей ввода есть 2 согласованные структуры HTML:

HTML 

<div class="ps-form__field ">
    <input type="email" name="email" id="email" class="ps-input email" >
    <div class="ps-form__field-desc lbl-descript">email address</div>
</div>

<div class="ps-form__field">
    <div class="ps-form__field-inner">
        <input type="text" value="" id="profile_field_name" data-id="name" class="ps-input">
    </div>
    <div class="ps-form__field-desc lbl-descript">First name</div>
</div>

Именно этот класс .ps-form__field-desc я хотел бы видеть как placeholder для input.

моя попытка jQuery 

var txtph = jQuery('.ps-form__field-desc').parents().each().text();
if ( jQuery('.ps-form__field > div').length ) {
    jQuery('.ps-form__field > input').each().attr('placeholder', txtph);
    jQuery('.ps-form__field-desc').remove();
}

Я знаю, что выше, вероятно, много ошибок, но это для меня ново.

1 Ответ

2 голосов
/ 27 марта 2019

Вы можете использовать это: 

$(document).ready(function() {
  $('.ps-form__field input').attr("placeholder",function() {
    return $(this).closest(".ps-form__field").find('.lbl-descript').text()
  });
  $('.lbl-descript').remove()
});

Он выберет каждый вход и установит для атрибута placeholder соответствующий текст .lbl-descript

Рабочая демоверсия 

$(document).ready(function() {
  $('.ps-form__field input').attr("placeholder", function() {
    return $(this).closest(".ps-form__field").find('.lbl-descript').text()
  });
  $('.lbl-descript').remove()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ps-form__field ">
  <input type="email" name="email" id="email" class="ps-input email">
  <div class="ps-form__field-desc lbl-descript">email address</div>
</div>

<div class="ps-form__field">
  <div class="ps-form__field-inner">
    <input type="text" value="" id="profile_field_name" data-id="name" class="ps-input">
  </div>
  <div class="ps-form__field-desc lbl-descript">First name</div>
</div>
...