Question

使用以下脚本我想更改[text]元素的内容颜色（如果它不是“0”），但它只是更改所有[text]或什么也没有。我的失败是什么？

HTML

<svg id="list">
  <g><text class="count" x=20 y=50>0</text></g>
  <g><text class="count" x=60 y=50>8</text></g>
  <g><text class="count" x=100 y=50>15</text></g>
</svg>

JS

$("svg#list").filter(function() {
   return document.getElementsByClassName('.count').innerHTML != '0';
}).css('fill','#ff0000');

My fiddle

Answer 1

首先，getElementsByClassName返回一个nodeList，因此innerHTML永远不会是"0"。其次，为什么要使用ID过滤元素。 ID是唯一的，只有一个#list元素。

您想要的可能是根据内部HTML过滤.count元素，您可以这样做

＆＃13;

$("#list .count").filter(function() {
   return $(this).html().trim() !== "0";
}).css('fill','#ff0000');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="list">
  <g><text class="count" x=20 y=50>0</text></g>
  <g><text class="count" x=60 y=50>8</text></g>
  <g><text class="count" x=100 y=50>15</text></g>
</svg>

＆＃13;

Answer 2

另一个解决方案是使用.each()，在.count下考虑每个#list，检查文本是否不等于'0'，然后更新css。

代码中的问题，document.getElementsByClassName('.count')会返回一个对象数组，因此.innerHTML无法正常工作。

同样$("svg#list").filter只会运行一次，因为只有1个元素#list。

＆＃13;

$('#list .count').each(function(){
  if($(this).text() != '0'){
    $(this).css('fill','#ff0000');
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="list">
  <g><text class="count" x=20 y=50>0</text></g>
  <g><text class="count" x=60 y=50>8</text></g>
  <g><text class="count" x=100 y=50>15</text></g>
</svg>

＆＃13;

innerHTML在SVG中无法正常工作？

2 个答案: