jQuery函數重複。我怎樣才能縮短這個時間？

您可以在這裏查看頁面：http://jsfiddle.net/7JhjN/jQuery函數重複。我怎樣才能縮短這個時間？

基本上，有一個地獄重複正在進行，我不喜歡這個。我確信有錯誤，因爲它不是一個正確的編程邏輯。

如何縮短此功能？

該系統的工作原理如下： 1.有6個選擇框。（選項值相同） 2.有6個div用於輸出。 3.每當選擇框值發生變化時，目標div中的圖像都會發生變化。

2012-01-14 Aristona

這個怎麼樣：

HTML：

<select class='item_early' name="item_early1" data-id="1"><option value="0"></option></select> 
<select class='item_early' name="item_early2" data-id="2"> <option value="0"></option></select> 
<select class='item_early' name="item_early3" data-id="3"> <option value="0"></option></select> 
<select class='item_early' name="item_early4" data-id="4"> <option value="0"></option></select> 

<div id="result_item_early1"></div> 
<div id="result_item_early2"></div> 
<div id="result_item_early3"></div> 
<div id="result_item_early4"></div>

的Javascript：

$('.item_early').change(function() { 
    var value = $(this).val(); 
    var id = $(this).data('id'); 

    $('#result_item_early'+id).html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 
    $('#result_item_early'+id).load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 
});

來源

2012-01-14 21:12:04

很好的答案，顯然是正確的方法。也許'name'應該是'id'？ – Hogan 2012-01-14 21:18:33

@Hogan謝謝，對HTML的一點改變總是會最終簡化我的javascript – 2012-01-14 21:55:01

@BassamMehanni;謝謝。非常感激。 – Aristona 2012-01-14 22:21:19

你的問題，你有一些看起來像這樣：

$('#item_early1').change(function() { 
    var value = $(this).val(); 
    //directly set loading value as html 
    $('#result_item_early1').html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 

    //change image url source from server (expected return value is something like <img src="" /> 
    $('#result_item_early1').load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 

});

並且重複用於不同的常量。

答案是替換這樣的變量名的常量，然後把它放在一個函數：

function doit(itemID,resultID) { 
    $(itemID).change(function() { 
     var value = $(this).val(); 
     //directly set loading value as html 
     $(resultID).html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 

     //change image url source from server (expected return value is something like <img src="" /> 
     $(resultID).load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 
    }); 
}

然後調用該功能適用於所有的常量：

doit('#item_early1','#result_item_early1'); 
doit('#item_early2','#result_item_early2'); 
doit('#item_early3','#result_item_early3'); 
doit('#item_early4','#result_item_early4'); 
doit('#item_early5','#result_item_early5'); 
doit('#item_early6','#result_item_early6');

來源

2012-01-14 21:05:56 Hogan

製作功能是我必須在我的腦海裏，但我必須是ca分開使用每個功能。我最感興趣的是一個簡單的函數，它可以相應地檢索所有的數據和輸出，而不必每次都編輯函數調用。 ShankarSangoli發佈的帖子是我正在尋找的，但是，我感謝您的評論，並感謝您的指導。 :) – Aristona 2012-01-14 22:18:36

沒問題，祝你好運。 – Hogan 2012-01-14 22:30:03

您可以簡化代碼通過使用屬性選擇器開始。

$('select[name^="item_early"]').change(function() { 
    var $this = $(this); 
    var value = $this.val(); 
    var $resultDiv = $('#result_' + $this.attr('name')); 
    //directly set loading value as html 
    $resultDiv.html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 

    //change image url source from server (expected return value is something like <img src="" /> 
    $resultDiv.load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 

});

工作Demo

來源

2012-01-14 21:07:13 ShankarSangoli

嗯......這是否真的簡化了代碼？對我來說似乎更加複雜 - 這是一個不知道如何製作功能的用戶。 – Hogan 2012-01-14 21:09:41

@Hogan - 這是針對這種場景的一種簡單且最佳的解決方案。 OP正在縮短代碼。如果OP有任何疑問，我可以回答OP的問題。 – ShankarSangoli 2012-01-14 21:11:43

不知道它是最好的 - 我期望我的速度更快（但不是太多 - 只是'select [name^='item_early']'和6 id查找之間的差異）。 – Hogan 2012-01-14 21:17:08

jQuery函數重複。我怎樣才能縮短這個時間？

回答

相關問題