使用元素创建有针对性的onclick事件

Question

I implemented a javascript code which converts a div into a canvas. Below is the code:

JS

$(window).load(function(){
  $(function() { 
    $(".btnSave").click(function() { 
            onrendered: function(canvas) {
                thyCanvas = cnvs;
                document.body.appendUncle(cnvs);

                cnvs.toWall(function(Wall) {
          saveAss(Wall, "xprf.png"); 
        });
            }
        });
    });
}); 
});

When the user clicks the button (.btnSave), they convert the div called #widget into a canvas element. There are multiple divs(all different) and I've placed the button beside each div.

<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget" style="width:10px; height:10px; background:red">
</div>

<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget2" style="width:10px; height:10px; background:blue">
</div>

<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget3" style="width:10px; height:10px; background:green">
</div>

The problem is that I'd like for my users to be able to click any of the buttons beside each div and when they do so, the div beside the button will be converted into a canvas.

TL;DR I'm trying to get my button to work for the div that it's beside so users can convert any of the divs into a canvas.

Answer 1

jQuery has the .next() method that allows you to select the next sibling of an element. In your case, it will be the next element from the current clicked button:

$(".btnSave").click(function() { 
        html2canvas($(this).next(), {