Question

<script>
(function () {
  jQuery.fn.szThreeStateColor = function (settings) {
    var cfg = {
      "overBgColor": "green",
      "overFgColor": "white",
      "clickBgColor": "blue",
      "clickFgColor": "white"
    };
    if(settings) {
      $.extend(cfg, settings);
    }
    var clickIdx = -1;
    $thisObj = $(this);
    var iniBgColor = $thisObj.find("tbody td").css("background-color");
    var iniFgColor = $thisObj.find("tbody td").css("color");
    var iniHeight = $thisObj.find("tr").css("height");
    $thisObj.find("tbody tr").bind("mouseover", function (e) {
      if($(this).index() != clickIdx) {
        $(this).css({
          "background-color": cfg.overBgColor,
          "color": cfg.overFgColor
        });
      }
    });
    $thisObj.find("tbody tr").bind("mouseout", function (e) {
      if($(this).index() != clickIdx) {
        $(this).css({
          "background-color": iniBgColor,
          "color": iniFgColor
        });
      }
    });
    $thisObj.find("tbody tr").bind("click", function (e) {
      //console.log($(this).index() + ":" + clickIdx);
      if($(this).index() != clickIdx) {
        if(clickIdx >= 0) {
          $thisObj.find("tbody tr:eq(" + clickIdx + ")").css({
            "background-color": iniBgColor,
            "color": iniFgColor
          });
        }
        $(this).css({
          "background-color": cfg.clickBgColor,
          "color": cfg.clickFgColor
        });
        clickIdx = $(this).index();
      }
    });
    return this;
  }
})($);
$(document).ready(function () {
  $("#table1")
    .szThreeStateColor({
    "overBgColor": "#34ef2a",
    "overFgColor": "#000000",
    "clickBgColor": "#333333"
  });
  $("#table2").szThreeStateColor();
});
</script>
</HEAD>

<BODY>

<table id="table1" width='300' border='1'>
<thead>
<tr><td>name</td><td>city</td><td>age</td></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>



<table id="table2" width='300' border='1'>
<thead>
<tr><td>name</td><td>city</td><td>age</td></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>

此事件在触发事件mouseover, mouseout, click时设置不同的单元格颜色。该插件适用于单个表，但在使用多个表时工作异常。也许变量clickIdx由每个表共享。如何防止共享该变量？

Answer 1

您可以将插件包装在return this.each(function() {...})。

中

jQuery.fn.szThreeStateColor = function (settings) {
   // ...
   return this.each(function() {
       // variables that need to be private go in here
   });
}

使jquery插件不在同一个插件中共享私有变量

1 个答案: