接受函數作為jQuery插件變量並返回參數

Question

我覺得這真的很簡單，我正在經歷“樹木換木”的時刻，但是這一時刻現在已經持續了一天，所以現在該尋求幫助了！ 我已經在Google上搜索並閱讀了很多SO答案，但是同樣，我還是很難將我看到的答案應用於我的確切問題，這無疑是由於我自己的缺點。

為了說明這個問題，我有一個示例jQuery插件（我試圖為此創建一個小提琴，但不知道如何在小提琴的“頁面”之外包括一個插件）：

(function ($) {

    $.fn.test = function (options) {
        var settings = $.extend({
            onItemClick: function () { },
            itemArray: new Array(),
        }, options);

        for (i = 0; i < settings.itemArray.length; i++) {
            var $item = $("<li></li>");
            $item.html(settings.itemArray[i].itemLabel);
            $item.click(function () {
                settings.onItemClick.call(settings.itemArray[i]);
            });
            this.append($item);
        }

        return this;

    };

}(jQuery));

如您所見，我接受一個函數作為變量-onItemClick。 為了簡潔起見，我省略了該功能是否存在的測試。

我的示例頁面如下所示：

<body>
    <div> 
        <ul id="testList"></ul>
    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {

        var testDataArray = new Array();

        var itemLabel = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
        var itemDate = ["2017-01-03", "2015-08-03", "2016-06-21", "2016-12-20", "2013-09-07"];

        for (i = 0; i < itemDate.length; i++) {
            var testData = {};
            testData["itemLabel"] = itemLabel[i];
            testData["itemDate"] = itemDate[i];

            testDataArray[i] = testData;
        };

        $("#testList").test({
            itemArray: testDataArray,
            onItemClick: function (item) {                
                alert(item.itemLabel + ": " + item.item.Date);
            }
        });
    })
</script>

因此，當我從頁面調用插件時，我希望能夠將一個函數作為參數傳遞，並能夠在該函數中包含變量，這些變量將由插件填充實際值。 最后一點是我陷入困境。

我編寫的代碼無法按原樣工作。 毫不奇怪，它會引發錯誤

無法讀取未定義的屬性“ itemDate”

因為settings.itemArray在我嘗試附加到該項目的click事件的函數范圍內是未知的。 我知道，我只是不知道正確的方法是什么！

Answer 1

這是一個工作片段。

您走在正確的道路上；

我在插件的onItemClick回調函數中添加了一個參數“ item”
當您以這種方式從插件調用函數時，第一個參數應該是undefined如settings.onItemClick.call(undefined, itemToSend);
您的插件在dom中創建了許多列表項，但是當選擇數組項時，原始的click函數無法區分它們。 由於這個原因，所有元素都作為arrayitem 5返回，因此在此版本中，將檢查單擊的列表項的索引，並使用它來選擇數組項，或者可以通過數據將數組項的內容附加到dom元素屬性（如評論所示）
您的警報功能稱為item.item.Date而不是item.itemDate
click函數已移出for循環，並且選擇器與插件的主選擇器相關聯，以允許多個列表

希望對您有所幫助。

 (function($) { $.fn.test = function(options) { var settings = $.extend({ onItemClick: function(item) { }, itemArray: [], }, options); var arrayItems = settings.itemArray; for (i = 0; i < arrayItems.length; i++) { var $item = $("<li></li>"); $item.html(arrayItems[i].itemLabel); // $item.html(arrayItems[i].itemLabel).data('arrayItems', arrayItems[i]); this.append($item); } $('li', this).click(function() { var indx = $(this).index(), itemToSend = arrayItems[indx]; // var itemToSend = $(this).data('arrayItems'); settings.onItemClick.call(undefined, itemToSend); }); return this; }; }(jQuery)); // copy everything above to a separate file and call via html $(function() { var testDataArray = []; var itemLabel = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; var itemDate = ["2017-01-03", "2015-08-03", "2016-06-21", "2016-12-20", "2013-09-07"]; for (i = 0; i < itemDate.length; i++) { var testData = {}; testData.itemLabel = itemLabel[i]; testData.itemDate = itemDate[i]; testDataArray[i] = testData; }; $("#testList").test({ itemArray: testDataArray, onItemClick: function(item) { console.log(item.itemLabel + ": " + item.itemDate); } }); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- <script src="/test.js"></script> --> <div> <ul id="testList"></ul> </div>

接受函數作為jQuery插件變量並返回參數

問題描述

1 個解決方案

解決方案1
1 已采納 2017-01-15 01:03:38

接受函數作為jQuery插件變量並返回參數

問題描述

1 個解決方案

解決方案1 1 已采納 2017-01-15 01:03:38

解決方案1
1 已采納 2017-01-15 01:03:38