如何改進這個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語句？

回答

相關問題