將一個變量傳遞給一個函數

標題可能會讓這個問題看起來比實際更簡單。首先，我對jQuery的瞭解，熟悉程度和技巧水平最多也不穩定，所以我很可能只是試圖用一種愚蠢的方式去做某件事，而這隻會讓一個noob變得有意義。將一個變量傳遞給一個函數

我有一個基於外部數據構建一堆文本字段的php生成頁面。這些字段將被轉換爲一種混合jQuery UI自動完成/組合框（如組合框，但允許自由文本）。我試圖將.click（function（...））分配給下拉按鈕時卡住了，我相信它必須處理這一事實，即我正在執行jQuery以通過for循環轉換所有文本字段並且var i沒有正確傳遞到.click函數中。

以下是完整的測試頁面，我的工作（幾乎所有的HTML和JS數組將通過PHP中生成）：

<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../includes/jquery-1.5.js"></script> 
    <script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script> 
     <style> 
    .ui-button { margin-left: -1px;width:18px; } 
    .ui-button-icon-only .ui-button-text { padding: 0; } 
    button.ui-button-icon-only {width:18px;height:21px;} 
    .ui-autocomplete-input { margin: 0; padding: 0; } 
    </style> 
</head> 
<body> 
    <form method="post" action="results.php"> 
    <input class="TC_1" type="text" name="TC_1_1" value="E02_04" /> 
    <script> 
      var availableTags = [['test1','test2','test3']]; 
    </script> 
    <br/> 
    <input class="TC_1" type="text" name="TC_2_1" /> 
    <script> 
      availableTags.push (['test5','test7','test9']); 
    </script> 
    <input type="submit" /> 
    </form> 
    <script type='text/javascript'> 
    //<![CDATA[ 
    var input = new Array(); 
var i = 1; 

$('.TC_1').each(function(index) { 

input[i] = $("[name=TC_"+i+"_1]").autocomplete({ 
    source: availableTags[i-1], 
    select: function(){alert("selected");}, 
    minLength: 0 
}).addClass("ui-widget ui-widget-content ui-corner-left"); 


$("<button type='button'>&nbsp;</button>") 
    .attr("tabIndex", -1) 
    .attr("title", "Show All Items") 
    .insertAfter(input[i]) 
    .button({ 
     icons: { 
      primary: "ui-icon-triangle-1-s" 
     }, 
     text: false 
    }) 
    .removeClass("ui-corner-all") 
    .addClass("ui-corner-right ui-button-icon") 
    .click(function() { 
    var $input = $(this).before(); 
    if ($input.autocomplete("widget").is(":visible")) { 
     $input.autocomplete("close"); 
     return; 
    } 
    $(this).blur(); 
    $input.autocomplete("search", ""); 
    $input.focus(); 
}); 

    i++; 
}); 
    //]]> 
    </script> 
</body> 
</html>

任何幫助將不勝感激。

編輯：對不起，我忘了補充一點，我得到「錯誤：輸入[i]是未定義行：62」

來源

2011-05-02 jreed121

你能更具體地說明問題是什麼嗎？ – 2011-05-02 22:48:04

您必須創建閉包才能使用i的正確值。 [Here]（http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/）你可以在「臭名昭着的循環問題」部分找到有關閉包的信息 – 2011-05-02 22:51:16

順便說一下，你有'來自'each'函數的索引變量。用它代替'i'變量。當然，你可以把它改成'i'。如果你這樣做了，不要忘記刪除最後一個增量，每個函數都會爲你做。 – 2011-05-02 22:56:00

確定。我在新的源代碼之後更新了我的答案。

試試看。

<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../includes/jquery-1.5.js"></script> 
    <script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script> 
    <style type="text/css"> 
    .ui-button { margin-left: -1px;width:18px; } 
    .ui-button-icon-only .ui-button-text { padding: 0; } 
    button.ui-button-icon-only {width:18px;height:21px;} 
    .ui-autocomplete-input { margin: 0; padding: 0; } 
    </style> 
</head> 
<body> 
    <form method="post" action="results.php"> 
     <input class="TC_1" type="text" name="TC_1_1" value="E02_04" /> 
     <br/> 
     <input class="TC_1" type="text" name="TC_2_1" /> 
     <input type="submit" /> 
    </form> 
    <script type="text/javascript"> 
     //<![CDATA[ 
     $('.TC_1').each(function(i) { 
     var availableTags = []; 
     availableTags.push(['test1','test2','test3']); 
     availableTags.push(['test5','test7','test9']); 

     $(this).autocomplete({ 
      source: availableTags[i], 
      select: function(){alert("selected");}, 
      minLength: 0 
     }).addClass("ui-widget ui-widget-content ui-corner-left"); 

     $("<button type='button'>&nbsp;</button>") 
      .attr("tabIndex", -1) 
      .attr("title", "Show All Items") 
      .insertAfter(this) 
      .button({ 
       icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
       text: false 
      }) 
      .removeClass("ui-corner-all") 
      .addClass("ui-corner-right ui-button-icon") 
      .click(function() { 
      var $input = $(this).prev(); 
      $input.autocomplete("destroy"); 
      $input.val("search").select(); 
      }); 
     }); 
     //]]> 
    </script> 
</body> 
</html>

來源

2011-05-02 22:59:23

我再也沒有遇到錯誤，但是當我點擊按鈕時，它不會顯示下拉菜單。 – jreed121 2011-05-02 23:34:14

我在示例頁面添加了更多代碼，希望它有所幫助。 – jreed121 2011-05-02 23:38:18

您不需要在輸入之間添加availableTags。所以我改變了一些並做了一些改進。 – 2011-05-03 13:44:24

終於搞清楚了，好樣的。我有一種感覺，下面的解決方法是可行的，但我希望能有一個更優雅的方式來做到這一點。

.click(function() { 

//Get the name for the target field: 
var target = $(this).attr('id'); 
target = target.substr(3); 

    // close if already visible 
    if ($("[name=TC_"+target+"]").autocomplete("widget").is(":visible")) { 
    $("[name=TC_"+target+"]").autocomplete("close"); 
     return; 
    } 
    $(this).blur(); 
    $("[name=TC_"+target+"]").autocomplete("search", ""); //where the error occurs 
    $("[name=TC_"+target+"]").focus(); 
});

而且我也給按鈕與現場對應一個唯一的名稱...

$("<button id='bt_"+i+"_1' type='button'>&nbsp;</button>")

感謝您的幫助球員。

來源

2011-05-03 15:31:57 jreed121

將一個變量傳遞給一個函數

回答

相關問題