Question

我想更改已经选中的文字的颜色，当你选择一些文字时，你可以在这里看到http://jsfiddle.net/o533v4m6/它的选择颜色取决于班级＆＃34; a＆＃34;或＆＃34; b＆＃34;即使我改变了类，但已经选择的文本的颜色没有改变，只有当我再次选择文本时它才会改变。这是代码

<p class="a">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum repellat dolores iste ut animi magnam veritatis dignissimos porro magni quam. Facere ratione nulla vel placeat saepe molestias non porro illo.
</p>

的CSS

p.a::selection {
    background-color: #C5979D !important;
    color: #fff;
}

p.b::selection {
    background-color: #77B28C !important;
    color: #fff;
}

的javascript

setInterval(function() {
    $('p').toggleClass('a')
    $('p').toggleClass('b')
}, 1000);

编辑： -

解决方案 - 更改课程后，清除选择并再次选择http://jsfiddle.net/o533v4m6/1/

Answer 1

正如Hugo sousa评论所说 - 改变课程后我清除了选择并重新选择了文本。

$(function() {
    $('#color').click(function() {
       $('p').toggleClass('a')
       $('p').toggleClass('b')

        // Try to clear the selection and reselect the text
        var selection = window.getSelection()
        var elements = [];
        var ranges = [];
        if (selection.rangeCount) {
            var i = selection.rangeCount
            while (i--) {
                ranges[i] = selection.getRangeAt(i).cloneRange();
            }
            selection.removeAllRanges()
            i = ranges.length;
            while (i--)
            {
                selection.addRange(ranges[i]);
            }
        }
    });
})

Answer 2

尝试将您的css更改为：

p.a::-moz-selection { 
    background-color: #C5979D; 
    color: #ffffff;
}

p.a::selection {
    background-color: #C5979D;
    color: #ffffff;
}

和b：

p.b::-moz-selection { 
    background-color: #77B28C; 
    color: #ffffff;
}

p.b::selection {
    background-color: #77B28C;
    color: #ffffff;
}

这应该将选择集设置为正常工作 Source

JavaScript更改已选择文本的颜色

2 个答案: