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         "/>

jquery的

 $( "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以字符串＆＃34; thisRow＆＃34;开头的元素。您需要搜索以变量thisRow的值开头的ID。

这里有一个示例fiddle，只更改了JS这一行（为了便于查看，我稍微修改了HTML）。

Answer 2

我能想到两个原因：

1）hover事件起泡，而不是mouseenter事件。这可能会导致问题，尤其是svg / polygon元素。所以也许试试吧。

2）我在SVG元素上遇到了事件监听器的问题，也许与多边形相同。尝试将事件绑定到包含多边形的div。

修改：您似乎自己使用了<polygon>元素。这不行。它是SVG中的一个元素。您需要将事件侦听器附加到所述SVG并添加<svg>标记。阅读更多here。还要确保等到你的DOM准备就绪：

使用Javascript：

$(document).ready(function() {
    $( "svg" ).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
                $('svg[id^=thisRow] polygon').attr('fill', '#ccc');
            }
        }
    });
});

HTML：

<svg id="sandiego0528loss10">
    <polygon fill="#FFFFFF" points="401.821,418.967 392.331,409.824 397.398,404.561 406.871,414.021        "/>
</svg>

<svg id="sandiego0528loss9">
    <polygon fill="#FFFFFF" points="391.122,398.292 386.347,403.142 392.317,409.632 397.398,404.561         "/>
</svg>

我的svg多边形填充在悬停时不会改变颜色

2 个答案: