Probleme mit der Änderung des Cursors Bild bei Änderung des Cursors - Leinwand Zeichnung App

Question

Ich erstelle eine Leinwand Zeichnung App und ich möchte in der Lage, meine Cursor Bilder für jedes Werkzeug zu laden, während Sie auf das Werkzeug klicken. Ich funktionierte, bis ich ein wenig renoviert und das Layout geändert habe. Ich lege die Werkzeuge in einen Tisch mit der Neugestaltung, aber ich denke nicht, dass dies das Problem sein sollte. Danke für all deine Hilfe.

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

zunächst die Zahl "2" in der Klasse entfernen <div class="tools">

zweiten der Weg falsch ist, corretion:

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

https://jsfiddle.net/nr6yn2yz/