jquery - 我的 svg 多边形填充在悬停时没有改变颜色

Question

我有一些 svg 多边形。当您将鼠标悬停在一个多边形上时，我想找到该多边形 ID 的一部分，然后更改其 ID 中具有该部分多边形 ID 的所有多边形的填充颜色。但它不起作用。没有多边形填充发生变化。请问有人知道我做错了什么吗？

示例多边形:

 <polygon id="sandiego0528loss10" fill="#FFFFFF" points="401.821,418.967 392.331,409.824 397.398,404.561 406.871,414.021        "/>
 <polygon id="sandiego0528loss9" fill="#FFFFFF" points="391.122,398.292 386.347,403.142 392.317,409.632 397.398,404.561         "/>

j查询

 $( "polygon" ).hover(
      function() {
        if (this.id.length > 0){
            var test = this.id.match(/\d{4}/); //see what the date is
            if (test !== null ) {
                //first part of test will be the date                   
                var thisDate = test[0]; 
                var matchIndex = test["index"];
                var thisRow = this.id.substring(0, matchIndex+4);
                //get all polygons with this prefix and color them

                $('polygon[id^=thisRow]').attr('fill', '#ccc');
            }

        }
      }, function() {

      }
    );

Answer 1

改变

$('polygon[id^=thisRow]').attr('fill', '#ccc');

到

$('polygon[id^=' + thisRow + ']').attr('fill', '#ccc');

当前行搜索 ID 以字符串“thisRow”开头的元素。您需要搜索以变量 thisRow 的值开头的 ID。

这是一个例子 fiddle只有那一行 JS 发生了变化(为了便于查看，我稍微修改了 HTML)。