Question

我是jQuery Plugin编码的初学者。

我编写了一个插件来生成甘特图的日历，但我无法与它进行交互。代码太长而无法发布，所以我编写了一个需要进行交互的样本。

以下是生成计数器的示例代码和两个用于增加或减少计数器值的按钮。

所以问题是：如何让按钮增加/减少计数器，当然还有刷新显示。

谢谢，

[编辑] 我再次解释我想做什么： - 按钮由插件生成。 - 单击它们时，它们会增加/减少值并刷新显示 - 我不想要外部动作绑定。 - 插件必须独立

[/编辑]

<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>

Answer 1

我修改了你的代码以添加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);

Answer 2

对不起我的第一个回答：）

所以这是你的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>

Answer 3

您需要将Count : ' + _myCount + '放在元素中..就像这样：

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

之后，您将创建一个函数来获取结果的值..就像这个$('#result').html()

使用输入的onclick事件增加或减少值...（您必须为输入添加类或ID ...）

我认为ID为btnDecrease和btnIncrease ...您需要执行以下操作：

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

和

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

希望有所帮助

jQuery：使用插件生成的按钮进行交互

3 个答案: