Question

我的网页包含ID为language1，star1，language2，star2等的输入。如果相应的语言字段包含，我需要激活星号输入字段length > 0。

现在我正在使用下面的代码，但我相信我应该能够通过while循环或类似方法解决这个问题，以避免反复重复相同的代码。有人可以帮我这个吗？

$('#language1').blur(function() {
    if ( $('#language1').val().length == 0){
        $('input[name=star1]',this.form).rating('readOnly',true);
    }
    else {
        $('input[name=star1]',this.form).rating('readOnly',false);
    }
});
$('#language2').blur(function() {
    if ( $('#language2').val().length == 0){
        $('input[name=star2]',this.form).rating('readOnly',true);
    }
    else {
        $('input[name=star2]',this.form).rating('readOnly',false);
    }
});
....

Answer 1

只制作一个处理程序：

var changeHandler = function(e) {
    $('input[name=star' + this.id.charAt(this.id.length-1) + ']').rating('readonly', this.value.length === 0);
}

使用多个选择器为多个元素使用相同的处理程序绑定模糊事件：

$('#language1, #language2').blur(changeHandler);

Answer 2

$('#language1, #language2').blur(function() {
    $('input[name=star'+this.id.charAt(this.id.length-1)+']',this.form).rating('readOnly', $(this).val() == '');                       
});

Answer 3

尝试（未测试）

 $('input[id=^language]').each('blur',function(i){  
     var $this = $('input[name="star" + i +"]',this.form);        
     ($(this).val().length == 0)
                 ? $this.prop('readonly')
                 : $this.removeProp('readonly');
 });

Answer 4

试试这个：你只需要为它们添加一个类就可以添加其他输入。

添加所有应该具有模糊功能的输入，让我们说“模糊” 现在在所有模糊的课程项目上运行“每个”功能：

$('.blurred').each(function() {
   var $that = $(this);
   var name  = $that.attr('name');

   if($that.val().length == 0){
     $('input[name='+name+']',this.form).rating('readOnly',true);                       
   } else {
     $('input[name='+name+']',this.form).rating('readOnly',false);
   }
});

Answer 5

您可以尝试添加while循环来动态测试任意数量的项目，当然它们是按数字顺序排列的：

var currentId = 1;
while ($('#language' + currentId++).length > 0) {
    $('#language' + currentId).blur(function() {
        if ( $('#language' + currentId).val().length == 0){
            $('input[name=star' + currentId + ']',this.form).rating('readOnly',true);                       
        }
        else {
            $('input[name=star' + currentId + ']',this.form).rating('readOnly',false);
        }
    });
}

Answer 6

您可以像这样使用jQuery的Multiple Selector功能

$( '#language1, #language2, moreselectorshere' ).blur( function() {

  var trailingNumber= this.id.charAt( this.id.length-1 ),
      activate = this.value.length > 0;

  $( 'input[name=start' + trailingNumber + ']', this.form )
      .rating( 'readyOnly',  activate );

})

Answer 7

Heyo

如果可以，请增强语言元素的Html代码。我想这是一个输入元素？

你可以试试这样的事情

<input type="text" id="language1" starelement="true" />
<input type="text" id="language2" starelement="true" />
...

您可以像这样修改您的jQuery

$('input[starelement=true]').blur(function() {
     //extract the 1 from the id value
     var idValue = $(this).attr('id');
     var numberValue = idValue.substring(idValue.length-1); 
     if ( $(this).val().length == 0){
       $('input[name=star' + numberValue + ']',this.form).rating('readOnly',true);                       
   }
   else {
      $('input[name=star' + numberValue + ']'.rating('readOnly',false);
   }
});

Answer 8

不要使用id选择另一个选择器，如类，并将其用作

$(".classname").blur(function(){
       if ( $(this).val().length == 0){
            $('input[name=star1]',this.form).rating('readOnly',true);                       
        }
        else {
            $('input[name=star1]',this.form).rating('readOnly',false);
        }
});

Answer 9

您还可以从使用的输入中导出要显示的星形框的名称。写一次，随处使用。类似于仅为相关输入显示工具提示的方式。

$('input').blur(
if ( $('#'+this.id).val().length > 0) {
    function(){star_id = '#'+this.id+'_star'; 
        $(star_id).show();}
});

Answer 10

您可以使用自定义属性来存储关系：

<input class="language" id="language1" data-rel="star1" />
<input id="star1" />
...

然后使用每个：

$('.language').each(function() {
  var t = $(this);
  t.blur(function() {
    if ( t.val().length == 0){
      $('#'+t.attr('data-rel')).rating('readOnly',true);                     
    } else {
      $('#'+t.attr('data-rel')).rating('readOnly',false);
    }
  });
});

Answer 11

for(var i = 1; i <= 2; i++) {
  $('#language'+i).blur(function() {
    if ( $('#language'+i).val().length == 0){
      $('input[name=star'+i+']',this.form).rating('readOnly',true);                       
}
else {
  $('input[name=star'+i+']',this.form).rating('readOnly',false);
    }
  });
}

只需将i＆lt; = 2更改为需要重复多次。

如何改进这个jQuery语句？

11 个答案: