Question

*HTML
<div id='board'>
    <div>abc<span class='curly1'>{</span></div>
    <div>'jkl'm<span class='curly2'>{</span>no<span class='curly2'>}</span></div>
    <div><span class='curly2'>}</span></div>
</div>

这是我的代码编辑器项目，我想实现类似记事本++功能的东西，突出显示成对的括号，如{}，（），[]，''，“”。你会怎么用css，js或者用jquery来说这个？

逻辑是这样的：

$(.curly1).hover(function(){
    //all class under curly1.css('background-color', 'red');
});

Answer 1

这是JSFiddle：http://jsfiddle.net/haoudoin/rzp6b/

假设您正在动态生成卷发并且您能够保持卷发的数量，我建议使用ID和CSS类以及编号系统的组合，以给它一些语义和分组。它还将帮助我们进行DOM操作。所以，这是我推荐的HTML：

    <div id='board'>
        <div>public class MyObject()<span id='open-curly1' class='curly curly1'>{</span>
        </div>
        <div>public void setKey()<span id='open-curly2' class='curly curly2'>{</span>return true;<span id='close-curly2' class='curly curly2'>}</span></div>
        <div>public void setValue()<span id='open-curly3' class='curly curly3'>{</span>return true;<span id='close-curly3' class='curly curly3'>}</span></div>
        <div><span id='close-curly1' class='curly curly1'>}</span>
        </div>
    </div>

以下是CSS的悬停类：

    .hover {
        background-color: red;
    }

这是jQuery中的伏都教魔法：

$(document).ready(function() {
    // get the curls
    var $curls = $("#board .curly");
    console.log($curls.length);
    // get the number of match & unmatched curls (Math.ceil)
    var curlyCount = Math.ceil($curls.length / 2);
    console.log(curlyCount);
    // systematically add a hover to each pair of matched curls and the unmatched
    for (var i = 1; i <= curlyCount; i++) {
        addCurlyHover(".curly" + i);
    }
});

function addCurlyHover (curlyClass) {
    // get the closing and opening curl, because they have a common class name
    // for example: .curly1
    $(curlyClass, "#board").hover(function (event) {
        // console.log(curlyClass);
        // will look for curly spans every time,in case braces are removed or added and reference is lost
        $(curlyClass).each(function (index) {
            $(this).addClass("hover");
        });
    }, function (event) {
        // console.log(curlyClass);
        $(curlyClass).each(function (index) {
            $(this).removeClass("hover");
        });
    });
}

Answer 2

我建议为所有块分隔符（例如delimiter）使用唯一的类，然后使用另一个属性来存储匹配项（例如data-match）。

所以span就像：

<span class="delimiter" data-match="7">

在JavaScript中：

$('.delimiter').hover(function () {
    var match = $(this).attr('data-match');

    $('.delimiter').each(function () {
        if ($(this).attr('data-match') === match) {
            // Do your styling here. Maybe add a class to the element.
            $(this).css('background-color', 'red');
        }
    });
});

Answer 3

这可能不是你想要的，但是在悬停在任何.curly1元素上，在javascript中你可以获取所有.curly1元素并为它们添加另一个类，第二个类将是突出显示类。在mouseout上，从所有.curly1元素中删除第二个类。

使用YUI，它看起来像这样：

var curlyNodes = Y.all('.curly1');
curlyNodes.on('mouseenter', function(){
    curlyNodes.addClass('highlight');
});
curlyNodes.on('mouseleave', function(){
    curlyNodes.removeClass('highlight');
});

Answer 4

首先，我认为你的HTML有错误。

...
   <div><span class='curly2'>}</span></div>
</div>

将是

...
   <div><span class='curly1'>}</span></div>
</div>

请尝试

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class^=curly]", function() {
        var className = $(this).attr('class').split(" ")[0];
        $("." + className).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class^=curly]", function() {
        var className = $(this).attr('class').split(" ")[0];
        $("." + className).removeClass("curlyHighlight");
    });
});

和jsfiddle。

而且，我的建议是更改类到数据属性，看起来像

<div>abc<span data-class='curly1'>{</span></div>

然后更改像

这样的javascript

var className = $(this).attr('data-class');

如果卷曲的东西只是左右支撑。代码看起来像。 fiddle

*HTML
<div id='board'>
    <div>
        abc<span data-class='curly1'>{</span>
        <div>
            'jkl'm<span data-class='curly1'>{</span>no<span data-class='curly2'>}</span>
        </div>
        <div>
            'jkl'm<span data-class='curly1'>{</span>
            <div>
                'jkl'm<span data-class='curly1'>{</span>no<span data-class='curly2'>}</span>
            </div>
            <span data-class='curly2'>}</span>
        </div>
        <span data-class='curly2'>}</span>
    </div>
</div>

我改变了逻辑 1.找到配对的支具。 2.改变他们的CSS。

以下是代码

*javascript
    $(document).ready(function() {
        $("#board").on("mouseenter mouseover", "[data-class^=curly]", function() {
            var nodes = $(this).add(findPair($(this)));
            nodes.addClass("curlyHighlight");
        });
        $("#board").on("mouseleave mouseout", "[data-class^=curly]", function() {
            var nodes = $(this).add(findPair($(this)));
            nodes.removeClass("curlyHighlight");
        });
    });

    function findPair(n) {

        var nextBraces = $([]);
        var brace = n.text();
        if (brace == '{') {
            nextBraces = n.nextAll("[data-class^=curly]");
        } else if (brace == '}') {
            nextBraces = n.prevAll("[data-class^=curly]");
        }

        var count = 0;
        var result = false;
        nextBraces.each(function(index, value) {
            var v = $(value);
            if (v.text() == brace) {
                count++;
            } else if (count != 0) {
                count--;
            } else {
                result = v;
                return false;
            }
        });
        return result;
    }

当其中一个类成员悬停时，突出显示所有类

4 个答案: