JavaScript更改已选择文本的颜色

Question

我想改变已经选定文本的颜色，您可以看到http://jsfiddle.net/o533v4m6/当您选择在那个时候它是选择颜色取决于“A”级或“B”，即使我改变一些文字在这里类，但是已经选择的文本的颜色不会改变，只有当我再次选择文本时才会改变。 这是代码

<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

尝试将CS​​S更改为：

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;
}

并且应该将选择集设置为正常工作。
资源