简化重复的jQuery功能

Question

这段代码感觉非常重复，我确信有一种更有效的方式来编写它。任何帮助将非常感激。

jQuery的：

$(function(){

      $('.perry_1_txt').keyup(function(){
         $('.perry_1').text($(this).val());
      });

      $('.perry_2_txt').keyup(function(){
         $('.perry_2').text($(this).val());
      });

      $('.perry_3_txt').keyup(function(){
         $('.perry_3').text($(this).val());
      });

      $('.perry_4_txt').keyup(function(){
         $('.perry_4').text($(this).val());
      });

      $('.perry_5_txt').keyup(function(){
         $('.perry_5').text($(this).val());
      });

      $('.perry_6_txt').keyup(function(){
         $('.perry_6').text($(this).val());
      });     

});

HTML：

<div>
<input class="perry_1_txt" /><span class="perry_1"></span>
<input class="perry_2_txt" /><span class="perry_2"></span>
<input class="perry_3_txt" /><span class="perry_3"></span>
<input class="perry_4_txt" /><span class="perry_4"></span>
<input class="perry_5_txt" /><span class="perry_5"></span>
<input class="perry_6_txt" /><span class="perry_6"></span>
<input class="perry_7_txt" /><span class="perry_7"></span>
</div>

代码动态地从输入中获取值并将它们放在相应的范围中。它工作正常，但不如优雅。

Answer 1

使用较少的类名，并将索引存储在其他位置。

HTML

<input class="perry_txt" data-index="1"/>
<input class="perry_txt" data-index="2"/>
<input class="perry_txt" data-index="3"/>
<!-- etc. -->

的JavaScript

$(function ()
{
    $('.perry_txt').keyup(function ()
    {
        var $this = $(this),
            i = $this.data('index');

        $('.perry_' + i).text($this.val());
    });
});

---

修改

好的，所以你已经展示了一些HTML。我们可以做得更好，不需要单个类名：

HTML

<div id="parent">
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
</div>

的JavaScript

$(function ()
{
    $('#parent').on('keyup', 'input', function ()
    {
        var $this = $(this);
        $this.next().text($this.val());
    });
});

Answer 2

你为jQuery函数提供的是css选择器。而JS中的这些仅仅是字符串。这意味着你可以动态生成它们。

$(function(){

   for(var e=1;e<7;e++){
      (function(){
        var i=e;
        $('.perry_'+i+'_txt').keyup(function(){
           $('.perry_'+i).text($(this).val());
        });
      })();
   }

}