Question

我有一个链接，当悬停时会使用页面中的注释突出显示特定内容。请看一下：

这是我想要实现的并且工作正常，我只有一个问题，我的内容将有一个开放的div标签，将在其他地方关闭，这导致上面的jsfiddle无法正常工作，我已经做了一个新的小提琴，并添加了导致这个打破的div，请看看这里

这是在添加导致问题的div之前正常工作的代码：

<!-- 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"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->
<a href="#one"> one </a> <br/>
<a href="#two"> two </a><br/>
<a href="#three">three</a>

这是添加了div的html：

<!-- DebugDataTemplateBegin {"template":"one"} -->

    <div> < ===========================

    <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"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->

</div> < ===================================

<a href="#one"> one </a> <br/>
<a href="#two"> two </a><br/>
<a href="#three">three</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 templateName = $(this).text().trim();
    var comment = getComment(templateName);
    var element = $(comment).next();
    element.toggleClass('highlight');
})

CSS：

.highlight {
    color: red;
}

我希望我能很好地解释这一点。

优素福

Answer 1

由于您无法在div中插入模板的注释，因此您可以尝试创建一个if-else子句，以便为第一个元素添加不同的内容：

您的HTML：

<!-- DebugDataTemplateBegin {"template":"one"} -->
<div>
    <div class="row notices" id="admin1">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
    <div class="row notices" id="admin2">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin3">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->
</div>

addapted JS：

var getComment = function (templateName) {
if(templateName=="one"){
        //First element, search the comment normally.
        return $("body").contents().filter(function(){return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));  }); 
    }else{
        //Other elements, search comments inside the childrens of the body (the div)
    return $("body").children().contents().filter(function () {
        return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
    });}
}

$('a').hover(function () {
    // var templateName = this.href.split('#')[1];
    var templateName = $(this).text().trim();
    var comment = getComment(templateName);
    if(templateName=="one"){
        //The first comment, look for the element inside the div
        var element = $(comment).next().children().first();
    }else{
        //Other comments, looks for them as normally
        var element = $(comment).next();
    }

    element.toggleClass('highlight');
})

更新了DEMO

额外：你有不同的ID具有相同的元素，它们应该是不同的！

获取具有开始标记和结束标记的注释之间的元素

1 个答案: