Question

我需要用Jquery来翻转twitter bootstrap glyphicons 例如，如果文档是RTL（我在div中检查，而不是在dir属性中）
然后我将从右到左和从左到右翻转字形。

我试过了：

function rtlChange() {
    var textDirection = $("#mydiv").data("direction");
    if (textDirection == "rtl") {
        $("i.glyphicon.glyphicon-chevron-right").toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
        $("i.glyphicon.glyphicon-chevron-left").toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
         $("i.glyphicon.glyphicon-arrow-right").toggleClass('glyphicon-arrow-right glyphicon-arrow-left');
        $("i.glyphicon.glyphicon-arrow-left").toggleClass('glyphicon-arrow-left glyphicon-arrow-right');
        $("i.glyphicon.glyphicon-hand-right").toggleClass('glyphicon-hand-right glyphicon-hand-left');
        $("i.glyphicon.glyphicon-hand-left").toggleClass('glyphicon-hand-left glyphicon-hand-right');        
     }
}

这改变了＆＃34; glyphicon-chevron-right＆＃34; to＆＃34; glyphicon-chevron-left＆＃34;。但由于下一行，所有＆＃34; glyphicon-chevron-left＆＃34;更改为＆＃34; glyphicon-chevron-right＆＃34;。

我需要一次左右的权利。

小提琴：http://jsfiddle.net/mavent/qc88s/19/

如何做这个Jquery？

Answer 1

你可以用非常简单的方式做到这一点：

function rtlChange() {

    var textDirection = $("#mydiv").data("direction");
    if (textDirection == "rtl") {
        $("i.glyphicon").each(function( index ) {

            if($(this).hasClass("glyphicon-chevron-right")){
                $(this).removeClass("glyphicon-chevron-right");
                $(this).addClass("glyphicon-chevron-left");
            }else{
                $(this).removeClass("glyphicon-chevron-left");
                $(this).addClass("glyphicon-chevron-right");
            }
        });
    }
}

这里是小提琴http://jsfiddle.net/qc88s/26/

Answer 2

首先存储选择器的选择，然后进行更改：

function rtlChange() {
    var textDirection = $("#mydiv").data("direction");
    if (textDirection == "rtl") {
        //Get all selectors' selections first
        var rightChevrons = $("i.glyphicon.glyphicon-chevron-right");
        var leftChevrons = $("i.glyphicon.glyphicon-chevron-left");
        rightChevrons.toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
        leftChevrons.toggleClass('glyphicon-chevron-left glyphicon-chevron-right');

        /* Do the same with the below
        $("i.glyphicon.glyphicon-arrow-right").toggleClass('glyphicon-arrow-right glyphicon-arrow-left');
        $("i.glyphicon.glyphicon-arrow-left").toggleClass('glyphicon-arrow-left glyphicon-arrow-right');
        $("i.glyphicon.glyphicon-hand-right").toggleClass('glyphicon-hand-right glyphicon-hand-left');
        $("i.glyphicon.glyphicon-hand-left").toggleClass('glyphicon-hand-left glyphicon-hand-right');
        */

    }
}

演示http://jsfiddle.net/qc88s/21/

Jquery翻转RTL的类数据

2 个答案: