1 
*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');
});
4

4 回答 4

1

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

所以spans 就像：

<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');
        }
    });
});
于 2013-08-03T04:44:15.900 回答
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");
        });
    });
}
于 2013-08-03T04:09:09.493 回答
0

首先，我认为您的 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>

然后改变像

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

如果卷曲的东西只用于左右大括号。代码看起来像。小提琴

*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;
    }
于 2013-08-03T03:08:36.623 回答
0

这可能不是您想要的，但是在任何 .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');
});
于 2013-08-03T02:29:42.950 回答