jQuery: заменить текстовое вхождение на входное значение при клике - PullRequest
Новая
       7

jQuery: заменить текстовое вхождение на входное значение при клике

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

Я хочу заменить вхождение данных между двумя конкретными символами в текстовой области данными поля ввода одним нажатием кнопки. Пока у меня есть это: 

$("#apply_capping").click(function() {
    $("body").children().each(function() {
        $(this).html($(this).html().replace(/(?<=\*).*?(?=\))/g,$("#cap").val()));
    });
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popunder-capping" class="panel-collapse collapse" style="background-color:#fff;color:#000">
      <ul class="list-group">
        <li class="list-group-item">
    <label class="cappings">Hour(s):</label> <input type="number" min="1" max="168" class="select-selected" id="cap" name="cap" size="1" maxlength="3"> 
        </li>
      </ul>
    <button id="apply_capping" type="submit" class="btn btn-primary">
    Apply
    </button>
</div>

<div class="portlet-body">
    <ul class="list-group">
        <li class="list-group-item">
            <label style="width:100%;">
                <i class="fas fa-code fa-fw"></i> Source Code
            </label>
            <br/>
<textarea id="parammed_popunder" rows="3" width="200" class="form-control">
wait:(3600*24)           </textarea>
        </li>
    </ul>
</div>

С моей стороны он фактически копирует значение из элемента с идентификатором cap и заменяет его в текстовой области. Проблема в том, что его нельзя использовать дважды, пока страница не обновится, а значение не исчезнет из ввода. Как мне подойти к этому?

1 Ответ

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

Вы должны изменить: 

$("#apply_capping").click(function() {
    $("body").children().each(function() {
        $(this).html($(this).html().replace(/(?<=\*).*?(?=\))/g,$("#cap").val()));
    });
});

на: 

$("#apply_capping").click(function() {
    $("body").find("textarea#parammed_popunder").val(function() {
        return $(this).val().replace(/(?<=\*).*?(?=\))/g,$("#cap").val());
    });
});

Проблема в том, что ваш текущий код меняет html на вашем сайте и тем самым элементы dom, которыепривязаны к событию click больше не существует. 

$("#apply_capping").click(function() {
    $("body").find("textarea#parammed_popunder").val(function() {
        return $(this).val().replace(/(?<=\*).*?(?=\))/g,$("#cap").val());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popunder-capping" class="panel-collapse collapse" style="background-color:#fff;color:#000">
      <ul class="list-group">
        <li class="list-group-item">
    <label class="cappings">Hour(s):</label> <input type="number" min="1" max="168" class="select-selected" id="cap" name="cap" size="1" maxlength="3"> 
        </li>
      </ul>
    <button id="apply_capping" type="submit" class="btn btn-primary">
    Apply
    </button>
</div>

<div class="portlet-body">
    <ul class="list-group">
        <li class="list-group-item">
            <label style="width:100%;">
                <i class="fas fa-code fa-fw"></i> Source Code
            </label>
            <br/>
<textarea id="parammed_popunder" rows="3" width="200" class="form-control">
wait:(3600*24)           </textarea>
        </li>
    </ul>
</div>
...