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 クラスは次のとおりです。

    .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

これはあなたが探しているものではないかもしれませんが、任意の .curly1 要素にカーソルを合わせると、javascript ですべての .curly1 要素を取得し、それらに別のクラスを追加できます。2 番目のクラスは強調表示クラスになります。マウスアウト時に、すべての .curly1 要素から 2 番目のクラスを削除します。

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 に答える
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>

次に、JavaScriptを次のように変更します

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 に答える