jQuery：使用插件生成的按鈕與

交互我是jQuery Plugin的編碼初學者。jQuery：使用插件生成的按鈕與

我已經編寫了一個插件來生成甘特圖的日曆，但我無法成功與它進行交互。代碼太長，無法發佈，所以我編寫了一個樣例，說明需要什麼樣的交互。

以下是生成計數器和兩個按鈕以增加或減少計數器值的示例代碼。

所以問題是：我如何使按鈕增加/減少計數器，當然刷新顯示。

感謝，

[編輯] 我又是我想要做的解釋： - 該按鈕由插件生成。 - 點擊時，它們增加/減少值並刷新顯示。 - 我不想要外部動作綁定。 - 該插件必須獨立

[/編輯]

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> 
    <title></title> 
    <link rel="stylesheet" href="/styles/jquery-ui.css" type="text/css"> 
    <script src="/scripts/jquery.js"></script> 
    <script src="/scripts/jquery-ui.js"></script> 
    <script> 
    (function($){ 
    $.fn.mySample = function() { 
     var _myCount = 0; 
     this.initialize = function() 
     { 
      this.html('<input type="button" value="--">Count : ' + _myCount + '<input type="button" value="++">'); 
     } 

     return this.initialize(); 
    } 
    })(jQuery); 

    $(document).ready(
    function() 
    { 
     $('#myDiv').mySample(); 
    } 
); 
    </script> 
    </head> 
    <body> 
    <div id="myDiv"></div> 
    </body> 
</html>

來源

2014-01-31 Taz

如果代碼太長，無法在此處發佈，那麼製作[JSFiddle]（http://jsfiddle.net/）或[Plunker]（http://plnkr.co/edit）可能是個好主意/）展示你的問題。 – Danny

如果你的代碼太長，你也可以使用http://codeshare.io/。但請注意：用戶可以修改您的代碼，以便JSFiddle可能更適合此目的。 – Kursion

從來沒有聽說過JSFiddle，我會看看！該示例恢復了我的問題：只需使用插件「從內部」進行交互。 – Taz

對不起，我的第一個答案:)

因此，這裏是你的MYSAMPLE插件的工作作爲一個獨立的

http://jsfiddle.net/P4p3m/2/

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> 
    <title></title> 
    <script src="jquery-1.11.0.min.js"></script> 
    <script> 
    (function($){ 
    $.fn.mySample = function() { 
     this._counter = 0; // Your counter 

     this.initialize = function (config) 
     { 
     // Get the context of the outside 
     var context = this; 

     // Init the -- button 
     var inputMinus = document.createElement("input"); 
     inputMinus.type = "button"; 
     inputMinus.value = "--"; 
     $(inputMinus).click(function(){ 
      context.updateCounter(-1); 
     }); 
     this.append(inputMinus); 

     // Init the display 
     var spanDisplay = document.createElement("span"); 
     context.spanDisplay = spanDisplay; 
     $(spanDisplay).text(context._counter); 
     this.append(spanDisplay); 

     // Init the ++ button 
     var inputPlus = document.createElement("input"); 
     inputPlus.type = "button"; 
     inputPlus.value = "++"; 
     $(inputPlus).click(function(){ 
      context.updateCounter(+1); 
     }); 
     this.append(inputPlus); 
     } 

     // Updating the counter value and the display 
     this.updateCounter = function(nbr){ 
     this._counter += nbr; 
     $(this.spanDisplay).html(this._counter); 
     }; 

     // Start the plugin 
     return this.initialize(); 
    } 
    })(jQuery); 

    $(document).ready(
    function() 
    { 
     $('#myDiv').mySample(); 
    } 
); 
    </script> 
    </head> 
    <body> 
    <div id="myDiv"></div> 
    </body> 
</html>

來源

2014-01-31 14:31:54 Kursion

護理我使用jquery-1.11.0.min.js，所以你應該修改第5行到你的jQuery文件庫： – Kursion

Kursion，you're天哪！非常感謝... – Taz

我的榮幸;）不要猶豫，提出更多的問題 – Kursion

你需要把Count : ' + _myCount + '的元素中..這樣的：

'Count : <div id="result">' + _myCount + '</div>'

之後你將創建一個函數來獲得結果的值..像這樣$('#result').html()

，增加或使用的onclick您輸入事件減少的價值......（您必須添加class和id爲您的輸入...）

我會假設id爲btnDecrease和btnIncrease ......你需要做這樣的事情：

$('#btnDecrease').on('click', function(){ 
    $('#result').html(parseInt($('#result').html()) - 1); 
});

和

$('#btnIncrease').on('click', function(){ 
    $('#result').html(parseInt($('#result').html()) + 1); 
});

希望它可以幫助

來源

2014-01-31 14:02:56

感謝您的幫助，但這不是我想要做的。你的解決方案是檢索HTML代碼並增加它。我的問題是通過插件中的函數與插件進行交互，並使用生成的按鈕進行插入。 – Taz

你不應該在插件中使用一個ID（你可能有衝突）。 – Kursion

嗯我知道了...... –

我修改你的代碼中加入的ID，以更好地識別按鈕和一個跨度，以確定我們要修改的計數：

下面是更新代碼，以反映您的意見，在小提琴工作代碼一起：http://jsfiddle.net/XMgz4/

(function ($) { 
    $.fn.mySample = function() { 
     var _myCount = 0; 
     var inputStr = '<input id="decButton" type="button" value="--">' 
        + 'Count : <span id="count">' + _myCount 
        + '</span><input id="incButton" type="button" value="++">'; 
     this.html(inputStr); 

     this.find("#decButton").on("click", function() { 
      _myCount --; 
      $("#count").text(_myCount); 
     }); 
     this.find("#incButton").on("click", function() { 
      _myCount ++; 
      $("#count").text(_myCount); 
     }); 
    } 
})(jQuery);

來源

2014-01-31 14:03:17 danasilver

這不能工作，_myCount有一個插件的範圍。不是全球性的。我已經複製/粘貼你的代碼：ReferenceError：_myCount沒有定義:-( – Taz

對不起，這只是改變計數的一個例子，第二塊代碼應該包含在插件中，這個.increment'，'this.decrement'。 – danasilver

看不清楚你的意思，你可以轉發完整的代碼嗎？ – Taz

jQuery：使用插件生成的按鈕與

回答

相關問題