为jQuery dRawr工具箱添加ID属性，解决多画布工具栏定位问题

问题原因 #

你循环中使用$('.drawr-toolbox').attr('id', 'toolbox-' + section)会选中页面上所有工具栏元素，把它们的ID全部替换成当前循环的section值。循环结束后，所有工具栏的ID都会变成最后一个section的数值，后续样式设置也只会作用于这个重复的ID（DOM中ID唯一，浏览器仅识别最后一个），最终导致所有工具栏位置完全相同且错误。

解决方案 #

无需给工具栏加ID也能精准定位，根据Drawr库的代码逻辑，工具栏会被插入到对应画布的父容器（即#drawr-container-"+section"）的后面，直接通过父容器的next()方法获取对应工具栏即可，避免全局选择所有工具栏元素。

修改后的完整代码 #

var question_secs = <?php echo json_encode($question_section_arr); ?>;
var arrayLength = question_secs.length;
$(document).ready(function(){
    for (var i = 0; i < arrayLength; i++) {
        var section = question_secs[i];
        // 初始化画布为绘图区域
        $("#drawr-container-"+ section +" .demo-canvas-"+ section +"").drawr({
            "enable_transparency" : false
        });

        // 启用绘图模式，显示控件
        $("#drawr-container-"+ section +" .demo-canvas-"+ section +"").drawr("start");

        var offset = $("#canvas-"+ section +"").offset();
        var topoff = offset.top + 1127;
        var leftoff = offset.left - 83;

        // 精准获取当前画布对应的工具栏（父容器的下一个元素）
        var $currentToolbox = $("#drawr-container-" + section).next('.drawr-toolbox');
        // 可选：设置唯一ID（如果后续需要单独操作）
        $currentToolbox.attr('id', 'toolbox-' + section);
        // 设置工具栏位置
        $currentToolbox.css({top: topoff, left: leftoff, position:'absolute'});
    }
});

额外说明 #

如果Drawr库生成工具栏时自动添加了drawr-toolbox-<canvasId>类（对应库代码中的toolbox.className = "drawr-toolbox drawr-toolbox-" + id;），也可以直接通过这个类选择：

var $currentToolbox = $('.drawr-toolbox-canvas-' + section);

不过用父容器的next()方法更可靠，能避免因ID命名规则变化导致的选择失败。

内容的提问来源于stack exchange，提问作者Dylano236