2

我正在开发一个绘图应用程序，但在使用 .addClass 时遇到了一些麻烦。我想要做的是将一个新类发送到一个菜单项，然后我可以使用它来运行一个清除我的画布的函数。当类预设为“new_file”时，我可以让列表项自行调用该函数，但我希望它处于非活动状态，直到在画布上完成某些绘图。我的想法是在画布上检测到鼠标按下时使用 .addClass，但它没有按计划进行。也鼓励其他关于如何实现这一点的想法。这是一些代码：

当单击具有类“new_file”的列表项时，我的 canvas.js 文件中的此代码会清除画布。

    $(document).ready(function(){
       $('.new_file').mousedown(function(){
          clearCanvas(); 
       });

       function clearCanvas(){
          context.clearRect(0, 0, canvas.width(), canvas.height());
       }
    });

这就是我尝试添加类的方法；它现在在我的“头脑”中：

    <script>
       $(document).ready(function(){
           $("#myCanvas").click(function() {  //tried .mousedown; did nothing
               $("#clear").addClass("new_file");
           });
       });
    </script>

这是我要操作的列表项：

    <li id="clear">Clear</li>

还有我的画布：

    <canvas class="canvaso" id="myCanvas" height="239" width="414"></canvas>
    <script type="text/javascript" src="canvas.js"></script>

我在观察萤火虫的同时尝试测试各种编辑，但似乎“new_file”没有被添加到列表项中。还尝试更改 #myCanvas 并测试页面上的其他 ID，但仍然无法添加 new_file。难住了。

4

1 回答 1

3

尝试使用live. 这样，当您向元素添加类时，它们会自动绑定到您的函数。

$('.new_file').live('mousedown', function(){
    clearCanvas(); 
});

如果您使用的是 jQuery 1.7+，请使用on代替live（因为它现在已被弃用）。

于 2012-09-30T04:50:26.897 回答