更短的jQuery onclick功能

Question

我用HTML和jQuery创建了一个简单的绘图编辑器。但我有100倍相同的代码：

$(document).ready(function(){  
    $('#1').click(function(){  
        $(this).toggleClass("black");  
    });  
});

和HTML：

<table>
    <tr>
        <td><button id="1" class="hidden">_</button></td>
    </tr>
</table>

和CSS：

.hidden {
        color: white;
}
.black {
        background-color: #000;
        color: #000;
}

这项工作对我而言，但我已经做了100次并问自己如何做到这一点？

Answer 1

http://jsfiddle.net/Ld6nqk1w/

$(document).ready(function(){  
    $('.hidden').click(function(){  
        $(this).toggleClass("black");  
    });  
});

Answer 2

您可以为每个按钮添加另一个类，如下所示：

 <button id="1" class="hidden toggleBtn">_</button>

然后你的jQuery将是：

  $('.toggleBtn').click(function(){  
    $(this).toggleClass("black");  
});

这将使该类的所有按钮都可以切换。