更改光标时更改光标图像的问题 - 画布绘图应用程序

Question

我正在创建一个画布绘图应用程序，我希望能够在单击工具时为每个工具加载我的光标图像。我一直在工作，直到我做了一些重新装修并改变了布局。我将工具放在重新设计的表格中，但我认为这不应该是问题所在。感谢您的所有帮助。

      ****************HTML**********************                 


 <div class="tools2">



  <table>                             
     <tr>
     <th>
     <div id="brush">
    <input type="image" class="line" src="./assets/imgs/tools/brush.png" />
     </div>
     </th>
     <th>  
     <div id="bucket">
   <input type="image" class="line" src="./assets/imgs/tools/bucket.png" onclick="setFill()" />
      </div>
      </th>
      <th> 
      <div id="eraser">
      <input type="image" class="line" src="./assets/imgs/tools/eraser.png" onclick="setEraser()" />
      </div>
       </th>
       <th>
       <div>
       <form onsubmit='return false;'>
       <input type='image' src="./assets/imgs/tools/clear_brush.png"  class="line" id="clear" onclick='clear_canvas_rectangle ()'>                          
       </form> 
       </div>      
        </th> 
        </tr>
       </table>

   ****************JQUERY********************** 

<script> 


   $('.tools2 a div').each(function() {
        $(this).click(function () {
            setCursor($(this).attr('id'));
        });
    });






function setCursor(id) {
    console.log("init.js: setCursor(): id: " + id);

    switch (id) {
        case 'brush':
            shape = SHAPE_TYPE.LINE;
        break;
        case 'circle':
            shape = SHAPE_TYPE.CIRCLE;
        break;
        case 'rectangle':
            shape = SHAPE_TYPE.RECTANGLE;
        break;
        case 'eraser':
            shape = SHAPE_TYPE.ERASER;
        break;
        case 'fill':
            shape = SHAPE_TYPE.FILL;
        break;


    }

    console.log("image path: " + 'cursor_' + id + '.png');

$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_' + id + '.png)0 130, auto');





$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/brush.png) 0 0, auto');
}

function setLine(){
    console.log('init.js: setLine(): brush');
    shape = SHAPE_TYPE.LINE;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_brush.png)0 130, auto');
}

function setEraser(){

    shape = SHAPE_TYPE.ERASER;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_eraser.png) 0 130, auto');
}
function setFill(){
    shape = SHAPE_TYPE.FILL;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/bucket.png) 0 130, auto');
}

function setCircle(){
    console.log('init.js: setCircle(): circle');
    shape = SHAPE_TYPE.CIRCLE;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_circle.png)0 130, auto');
}
function setRectangle(){
    console.log('init.js: setRectangle(): rect');
    shape = SHAPE_TYPE.RECTANGLE;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_rectangle.png)0 130, auto');



}

Answer 1

先去掉<div class="tools">类中的数字“2”

第二个路径错误，更正：

 $('.tools table tr th div').each(function() {
        $(this).click(function () {
        console.log($(this).attr('id'));
            setCursor($(this).attr('id'));
        });
    });

https://jsfiddle.net/nr6yn2yz/