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：使用插件生成的按钮与

回答

相关问题