href锚定标记/css选择器问题与canvas类而非id有关

href anchor tag /css selector issue with canvas class instead of id

本文关键字：canvas 有关 id 问题 选择器 css href      更新时间：2023-09-26

我正在使用sketch.js html画布库在我的电子书中的多个页面上绘制。在我的应用程序中，电子书页面在加载书籍时会动态加载。所以我在一些页面中注入了多张画布，我应该这样画：

......//page content
$(pageContent).append('<canvas class="simple_sketch"  style="background: url(images/white.jpg);" width="400" height="600"></canvas>');

然后使用每个循环调用草图函数

$('.simple_sketch').each(function() {
  $(this).sketch();
});

到目前为止，这很好，我可以在每一页上绘制绘画，但当我尝试添加工具（标记大小、颜色、重置按钮）时，我的href锚标记不起作用。我的html标记如下：

<div class="paint_tools">
  <a href="#simple_sketch" data-size="3"><img src="images/pen-medium.png" width="49" alt=""></a>
  <a href="#simple_sketch" data-size="5"><img src="images/pen-medium.png" width="49" alt=""></a>
  <a href="#simple_sketch" data-size="10"><img src="images/pen-large.png" width="49" alt=""></a>
  <a class="colors" href="#simple_sketch" data-color="#8f395b" style="background: #8f395b;"></a>
  <a class="colors" href="#simple_sketch" data-color="#c44f4f" style="background: #c44f4f;"></a>
  <a class="colors" href="#simple_sketch" data-color="#ff66a2" style="background: #ff66a2;"></a> style="background: #46a843;"></a>
</div>

在这里，我将id的"#"替换为class的"。"作为

$('.paint_tools a').attr('href').replace('#','.');

但它似乎不起作用，谁能指出我缺少的地方来选择尺寸和颜色吗？顺便说一句，我喜欢只有这个作为书中所有画布的唯一工具集。

非常感谢任何形式的帮助，提前表示非常感谢。

问题解决了：以下是我如何解决的：

我发现没有必要替换#标签，所以我删除了那个部分，我只使用点击处理程序来更新我的标记大小和颜色，如下所示：

$(function() {
        $('.paint_tools a').on('click', function() {
            var a = $(this).data('size');
            $('.simple_sketch').each(function(){
            $(this).sketch().set('size',a);
            })
      });
    });
        $(function() {
        $('.paint_tools a').on('click', function() {
            var a = $(this).data('color');
            $('.simple_sketch').each(function(){
            $(this).sketch().set('color',a);
            })
      });
    });

希望它能帮助像我这样使用草图库的人。

相关文章：