Question

我的代码中的评论很少，例如：

<!-- DebugDataTemplateBegin  {"template":"one"} -->
<div class="row notices" id="admin">
   comment One content
</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->

<!-- DebugDataTemplateBegin  {"template":"two"} -->
<div class="row notices" id="admin">
   comment Two content
</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->

我有这样的锚：

<a href="#"> one </a> <br/>
<a href="#"> two </a>

这些链接内容对应于评论＆＃39;模板＆＃39;元素，我想要实现的是，当用户将鼠标悬停在任何这些链接上时，它的对应内容（在评论之间）将被突出显示。

我开始了一个简单的jsfiddle示例http://jsfiddle.net/Banzay/md79aaby/，但不确定这是否可行。

很抱歉，如果我没有解释清楚这一点。

优素福

Answer 1

清理上面的答案并将其删除。

您可能需要更改您正在寻找评论的父级。而正则表达式可以使用一些爱，但这是一般的想法。

HTML：

<!-- DebugDataTemplateBegin {"template":"one"} -->
    <div class="row notices" id="admin">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
    <div class="row notices" id="admin">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
<a href="#one"> one </a> 
<br/>
<a href="#two"> two </a>

JS：

var getComment = function (templateName) {
    return $("body").contents().filter(function () {
        return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
    })
}

$('a').hover(function () {
    var templateName = this.href.split('#')[1];
    var comment = getComment(templateName);
    var element = $(comment).next();
    element.toggleClass('highlight');
})

http://jsfiddle.net/md79aaby/18/

JS，突出显示评论之间的内容

1 个答案: