Question

我试图在给定类名的页面上访问一些svg元素。但是，当类名包含破折号时，它不起作用。有一些工作吗？

<svg width="100" height="20" class="123-456">
    <rect width="50" height="20" style="fill:red" />
</svg>
<svg width="100" height="20" class="567-345">
    <rect width="50" height="20" style="fill:red" />
</svg>
<svg width="100" height="20" class="123-456">
    <rect width="50" height="20" style="fill:red" />
</svg>

<br>
    <a href="#" onclick="highlightSVG(123-456)">highlight</a>

JS：

function highlightSVG(conversationid) {
    $('[class="' + conversationid + '"]').css('width','20');
}

以下是小提琴的链接：http://jsfiddle.net/93FHf/

如果删除破折号，它会起作用，但在这种情况下，我必须更改项目中的一些命名约定： - /

Answer 1

如果为函数传入的值被引用，它就可以工作！

onclick="highlightSVG('123-456')"

您也可以简单地使用类选择器而不是属性选择器：

$("." + conversationid)...

Answer 2

你正在通过争论123-456。当在Javascript中检索它时，它执行算术运算，结果为-333。

你把它作为一个字符串传递给参数而不是它适合你。

关注更新的小提琴。

Answer 3

更改

   <a href="#" onclick="highlightSVG(123-456)">highlight</a>

要

   <a href="#" onclick="highlightSVG('123-456')">highlight</a>

和

$('[class="' + conversationid + '"]').css('width','20');

要

$('.'+conversationid).css('width','20');

Answer 4

 <a href="#" data-myclass ='123-456' onclick="highlightSVG(this)">highlight</a>


function highlightSVG(conversationid) {
var colClass = $(el).data('myclass ');
}

尝试使用自定义数据。 bcz直接它不会选择破折号

逐个元素 - 用破折号获取

4 个答案: