javascript - 我如何才能使js函数泛型以在窗体上的任何地方工作？ (干)

很抱歉我的noobie问题，但是我有一个功能适合大型应用程序的特定领域。我知道我可以对每个可能的字段进行硬编码，但是我想保持代码干燥。我该怎么做才能将此独特的功能添加到表单中的每个字段中。 （他们都共享一个共同的类，但是我无法使它起作用。）

My Fiddle

这是我的HTML

<form id="form">
<div class="searchContainer">
<select name="mySelect" id="nameEx" class="allS">
    <option value="1" selected="selected">AND</option>
    <option value="2">EXCLUDE</option>
    <option value="3">OR</option>
</select>

<input class="textArea" id="name" name="name" placeholder="Name" style="margin: 0 auto;" type="text">
</div>
      <br>
  <div class="searchContainer">
<select name="mySelect" id="numberEx" class="allS">
    <option value="1" selected="selected">AND</option>
    <option value="2">EXCLUDE</option>
    <option value="3">OR</option>
</select>
    <input class="textArea" id="number" name="number" placeholder="Phone Number" style="margin: 0 auto;" type="text">
    </div>
   <br>
   <div class="searchContainer">
  <select name="mySelect" id="cityEx" class="allS">
    <option value="1" selected="selected">AND</option>
    <option value="2">EXCLUDE</option>
    <option value="3">OR</option>
</select>
<input class="textArea" id="city" name="city" placeholder="City" style="margin: 0 auto;" type="text">
    </div>
  </form>
  <div id="name_here" class="summaryParams"></div>

这是我的JS

$(".searchContainer").change(function () {
var str = '';
if ($('#name').val().length > 0)
    var str = $('#nameEx>option:selected').text() + ' Name: ' + $('#name').val();
$("#name_here").html(str);
});
$('#name_here').on('click', function() {document.getElementById("name").value = '';
 $("#name_here").html("");
});

PS字段需要返回不同的结果。
谢谢

最佳答案

如果我正确理解了您的问题，则可以像这样使用each()。

$(".searchContainer").each(function(){
    $(this).change(function(){
        // code to run on change on each .searchCOntainer
    });
});

我认为这接近您想要的。 Fiddle

$(".searchContainer").each(function(){
    $(this).change(function () {
        var input = $(this).find('.textArea');
        var str1 = $('#name_here').text();
        var str2 = '';

        if (input.val().length > 0) {
            var str2 = $(this).find('option:selected').text() + ' ' + input.attr('placeholder') + ': ' + input.val();
        }

        $("#name_here").html(str1 + ' ' + str2);
    });
});


$('#name_here').on('click', function() {
  document.getElementById("name").value = '';
  $("#name_here").html("");
});