如何改进这个jQuery语句？

我有一个页面，输入ID为language1,star1,language2,star2等我需要激活星形输入字段，如果相应的语言字段有length > 0。如何改进这个jQuery语句？

现在我正在使用下面的代码，但我相信我应该能够用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); 
    } 
}); 
....

来源

2012-01-17 Daniel

请为我们做一个小提琴 – diEcho 2012-01-17 06:38:05

在jQuery中有没有称为'rating'的功能 – diEcho 2012-01-17 06:43:57

哇，11个答案中至少有5个甚至没有用'if（...）y（true）else y（false）'代替简单地说'y（...）'。我错过了什么吗？ – Arjan 2012-01-17 16:46:42

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

来源

2012-01-17 06:47:49 xdazz

很多很好的解决方案，将其标记为答案，因为我发现它是最优雅的解决方案。 – Daniel 2012-01-17 08:09:46

-1

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); 
    } 
    }); 
}

只是< = 2改变我对你需要这个然而重复多次。

来源

2012-01-17 06:38:49 Johandk

这将假设只会有一定数量的语言。如果还有更多？然后你需要每次修改脚本... – FarligOpptreden 2012-01-17 06:42:10

你可以尝试添加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); 
     } 
    }); 
}

来源

2012-01-17 06:41:32 FarligOpptreden

您可以使用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); 

})

来源

2012-01-17 06:41:47 jitter

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); 
    } 
});

来源

2012-01-17 06:42:03 Grrbrr404

试试（未测试）

$('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'); 
});

来源

2012-01-17 06:43:30 diEcho

不使用选择编号使另一个选择器，如类和使用它作为

$(".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); 
     } 
});

来源

2012-01-17 06:43:36 Dau

做只有一个处理程序：

与使用多选几个元素相同的处理

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

绑定模糊事件：

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

来源

2012-01-17 06:43:45

您也可以推导出星盒子的名字所示从使用的输入。只写一次，随处使用。类似于仅显示相关输入的工具提示的方式。

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

来源

2012-01-17 06:45:04 DevCoDesign

试试这个：您可以通过简单地添加一个类来他们增加其他投入。

添加到您所有的输入，应该有模糊函数的类，让我们说“模糊” 现在所有模糊类的项目运行“的每个”功能：

$('.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); 
    } 
});

来源

2012-01-17 06:48:27

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

<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); 
    } 
    }); 
});

来源

2012-01-17 06:59:06 bgun

如何改进这个jQuery语句？

回答

相关问题