jquery - 仅当现有填充颜色为特定值时才填充 SVG

Question

我正在使用此代码来更改 SVG 对象的填充颜色，它可以工作:

  $(function() {
      $('g').mouseenter(function () {
              $('path, rect, circle', this).attr('fill', '#00C8C8');
      })
  });

但是，我只想在现有填充颜色具有特定值时更改填充颜色。所以，我想到了这样的事情:

  $(function() {
      $('g').mouseenter(function () {
          if($('circle', this).attr('fill') == '#DCDCFF'){
              $('circle', this).attr('fill', '#00C8C8');
          }
      })
  });

编辑:...再次，jsfiddle 中的轻微错误(感谢罗伯特)

我在 jsfiddle 上创建了一个页面:http://jsfiddle.net/Wc9ZE/4/

为了展示我想要表达的意思，我还使颜色更加清晰。

问题是，所有的矩形都变黄然后变红，我只想让原来是黄色的大矩形变红然后变回黄色。白色小矩形应保持白色。

Answer 1

你的括号位置不对

if($('path, rect, circle', this).attr('fill') == '#DCDCFF') {

jsfiddle 看起来相当奇怪，因为在第一个循环中您使用的是 val 而不是 attr，即

if ($('circle', this).val('fill')

应该是

if ($('circle', this).attr('fill')

不应该吗？

最后，如果您只想让它在一个矩形上工作，那么您应该给该矩形一个 id 属性(下面我假设 id="r")，然后像这样更改代码...

  $(function () {
      $('g').mouseenter(function () {
          if ($('circle', this).attr('fill') == 'yellow') {
              $('circle', this).attr('fill', 'pink');
          }
          if ($('#r', this).attr('fill') == 'red') {
              $('#r', this).attr('fill', 'yellow');
          }
      }).mouseleave(function () {
          if ($('#r', this).attr('fill') == 'yellow') {
              $('#r', this).attr('fill', 'red');
          }
          if ($('circle', this).attr('fill') == 'pink') {
              $('circle', this).attr('fill', 'yellow');
          }
      });
  });