Question

我希望在使用jQuery fill方法和data- *属性单击时，更新Circle元素的css属性.css()（例如，从蓝色变为红色）。

示例：

CSS

svg {
  height: 200;
  width: 200;
}
circle {
  fill: blue;
}

JAVASCRIPT

jQuery(function(){
  $(document).on("click", "[data-update]", function(){
    var circle = $(this).find("circle");
    circle.css({ fill: "red" });
  });
});

HTML

<svg data-update>
  <circle cy="100" cx="100" r="50"></circle>
</svg>

演示的链接是here。

因此，如果我向data-update属性添加值（例如绿色）：

data-update="green"

那么我应该在脚本中更改或添加哪些特定代码才能更改Circle元素的颜色？

有什么想法吗？

Answer 1

您只需获取属性的值即可。 Demo

jQuery(function(){
  $(document).on("click", "[data-update]", function(){
    var circle = $(this).find("circle");
    circle.css({
      fill: $(this).data('update') // <-- get value
    });
  });
});

<svg data-update="green">
  <circle cy="100" cx="100" r="50"></circle>
</svg>

Answer 2

如果您按如下方式更改代码，您将获得结果。

jQuery(function(){
  $(document).on("click", "svg", function(){
    var circle = $(this).find("circle");
    var color = $(this).data("update");  -- Read the data-update attribute
    circle.css({ fill: color });
  });
});

如何使用带有SVG Circle元素的data- *属性

2 个答案: