jQuery:单击时用输入值替换正文文本的出现

时间:2019-03-11 14:46:27

标签: javascript jquery html function replace

我想通过单击按钮用输入字段的数据替换文本区域中两个特定字符之间的数据出现。到目前为止,我有这个:

$("#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>

实际上,它实际上是从ID为cap的元素中复制值,并将其替换为文本区域。问题是除非刷新页面,否则它不能被使用两次,并且该值将从输入中消失。我应该如何处理?

1 个答案:

答案 0 :(得分:0)

您应该更改:

$("#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,并且与click事件绑定的dom元素不再存在。

$("#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>