javascript - CSS - 动态改变文本的颜色

Question

我是 CSS 和 AngularJs 的新手。我正在使用 text-angular，其中我正在显示一个 html 文件。根据一些规则，我需要突出显示该 html 中的一些单词。我有上一个和下一个点击功能，当我点击下一个时，它会自动聚焦下一个单词并突出显示它。所以，我想每次都突出显示所有单词。但是只有现在处于焦点的单词应该是不同的颜色。我的代码是 -

mark, .mark {
    background-color: #FFEB3B;
    padding: .2em;
}
$scope.highlight_AutoFocusOrphan = function() {
    uploadService.getDocumentAsHTML($scope.documentType, uploadService.currentFileName)
        .then(function(data) {
            $rootScope.data.htmlDocument = $scope.highlightHTML(data, $scope.orphanData.orphanText);
            $timeout(function() {
                $scope.editorScope = textAngularManager.retrieveEditor('editor1').scope;
                var element = $scope.editorScope.displayElements.text;
                if (element != null) {
                    element[0].querySelector('.mark').focus();
                    angular.forEach(uploadService.getOrphans(), function(orphan) {
                        //if (first_iteration) {
                        $rootScope.data.htmlDocument = $scope.highlightHTML($rootScope.data.htmlDocument, orphan.attributes.text);
                        first_iteration = false;
                        // }
                    });
                }
            });
        }, function(error) {
            $scope.errorMessage = error.status + " : " + error.statusText;
            toastr.error($scope.errorMessage, 'Error : ' + error.status);
            if (error.status === 401) {
                loginService.authenticationError();
            }
        })
        .finally(function() {
            $scope.fetchingDocumentAsHTML = false;
        });
};
$scope.highlightHTML = function(content, text, className, notByWordBoundry) {
    var RegExpEscapeText, str;
    if (!(content && content.replace)) {
        return '';
    }
    if (!text) {
        return $sce.trustAsHtml(content);
    }
    if (!className) {
        className = 'mark';
    }
    RegExpEscapeText = text.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
    if (!notByWordBoundry) {
        str = new RegExp('(\\b)' + RegExpEscapeText + '(\\b)', 'gi');
    } else {
        str = new RegExp(RegExpEscapeText, 'gi');
    }
    return content.replace(str, '<span tabindex="1" class="' + className + '">$&</span>');
};

我尝试了不同的解决方案。但我无法解决它。在此先感谢。

Answer 1

这可能会有帮助。用 jQuery 试试: 在 JSFiddle 上查看

$(function () {
    var $item = $('.box .box-item'),
    radnomColor = ["red", "blue", "black", "yellow", "brown", "gray", "orange"],
    blueSpec = ["#82bdff", "#447bb7", "#224f80", "#1571d6", "#6237f7", "#9d81ff"];

    $.each($item, function (j, m) {
        var $wrap = $(this).parent();
        if ($wrap.hasClass('colorScale')) {
            var colorIndex = j < radnomColor.length ? j : (j - (radnomColor.length * parseInt(j / radnomColor.length)));
            $(m).css("color", radnomColor[colorIndex]);
        }
        if ($wrap.hasClass('blueScale')) {
            var colorIndex = j < blueSpec.length ? j : (j - (blueSpec.length * parseInt(j / blueSpec.length)));
            $(m).css("color", blueSpec[colorIndex]);
        }
    });
})

并结合标记:

<h2>
     Random color scheme
    </h2>
   <div class="box colorScale">
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
    </div>
    <hr>
    <h2>
     Blue color scheme
    </h2>
    <div class="box blueScale">
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
        <div class="box-item">
            This is random "green" colored scheme
        </div>
    </div>