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

Question

我实现了一个将 div 转换为 Canvas 的 javascript 代码。下面是代码:

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"); 
        });
            }
        });
    });
}); 
});

当用户单击按钮 (.btnSave) 时，他们会将名为 #widget 的 div 转换为 Canvas 元素。有多个 div(全部不同)，我已将按钮放在每个 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>

问题是我希望我的用户能够单击每个 div 旁边的任何按钮，当他们这样做时，按钮旁边的 div 将转换为 Canvas 。

TL;DR 我正在尝试让我的按钮适用于它旁边的 div，以便用户可以将任何 div 转换为 Canvas 。

Answer 1

jQuery 具有 .next() 方法，允许您选择元素的下一个兄弟元素。在您的例子中，它将是当前单击按钮的下一个元素:

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