jQuery为每个输入更改匹配元素的文本答案

【问题标题】：jQuery for each input change text for matching elementjQuery为每个输入更改匹配元素的文本
【发布时间】：2017-09-08 13:30:47
【问题描述】：

我正在制作一张可打印的 ICE 卡。用户在表单输入中输入信息，它们会在下面显示预览。

我的代码运行良好，但我必须为每个输入/元素匹配复制/粘贴它。我想压缩代码，以便它监听每个输入的更改并更改匹配元素的文本。

下面的片段。 JSFiddle 是here

$("#inputName").keyup(function() {
  $("#spanName").html($(this).val());
});

$("#inputHCN").keyup(function() {
  $("#spanHCN").html($(this).val());
});

$("#inputDOB").keyup(function() {
  $("#spanDOB").html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

【问题讨论】：

注意：.keyup 不适用于鼠标复制粘贴。我想你想使用.change() 函数
为什么要投一个正确的答案，伙计们，来吧？？

标签： javascript jquery forms input

【解决方案1】：

数据属性是我要走的路

$("[data-out]").keyup(function() {
  var selector = $(this).data("out");
  $(selector).text($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

将data-target 属性添加到您的表单元素，其中包含应显示文本的元素的ID：

<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">

现在更改您的脚本以显示文本。请注意，我使用了两个事件 keyup 和 change，这样复制粘贴也可以工作。

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

演示如下：

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

【讨论】：

【解决方案3】：

可能有很多变体，这里有一个简短的变体，它依赖于在输入 id 属性和跨度 id 属性之间保持命名约定：

$("#inputName,#inputHCN,#inputDOB").keyup(function() {
  $("#span" + this.id.replace('input', '')).html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

【讨论】：

【解决方案4】：

另一种方法是将input 替换为span，假设遵循命名约定。

 $("#inputName, #inputHCN, #inputDOB").keyup(function() {
     var spanId = $(this).attr("id").replace("input", "span");
     $("#" + spanId).html($(this).val());
 });

【讨论】：

【解决方案5】：

你可以试试这个。希望它会有所帮助。只需更改文本框的名称并使用文本框名称找到跨度控件。

$("#inputName,#inputHCN,#inputDOB").keyup(function() {
        var inputValue = $(this).attr("name");
        $("#span" + inputValue).html($(this).val());
  });

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="Name" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="HCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="DOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

【讨论】：

【解决方案6】：

您可以循环输入并为每个输入添加事件侦听器：

var inputs = $('form p input');

for (var i=0; i<inputs.length; i++) {
  $(inputs[i]).keyup(function() {
    var span = $(this).attr('id').replace('input','span');
    $("#"+span).html($(this).val());
  });
}

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

【讨论】：

我也不喜欢人们默默地投票，你的解决方案是有效的 +1
@codtex 是的，他们至少可以解释原因！谢谢。

【解决方案7】：

//map the names of the input elements with the output elements
var myIOMap={
    inputName:"spanName",
    inputHCN:"spanHCN",
    inputDOB:"spanDOB",
};

function doTextBinding(ioMap){
    Object.keys(ioMap).forEach(function(inputName,outputName){
        var inputElement="#"+inputName;
        var outputElement="#"+ioMap[inputName];
        console.log(inputElement);
        console.log(outputElement);
        $(inputElement).keyup(function() {
            $(outputElement).html($(this).val());
        });
    });

}
doTextBinding(myIOMap);

用下面的代码替换你的 JavaScript，它会做同样的事情，而不必为每个元素重写 key-up 绑定。确保每次页面初始化时都调用该函数。

【讨论】：