CSS - テキストの色を動的に変更する

Question

私はCSSとAngularJsを初めて使用しています。私はテキストを使用しています - 角度は、私はhtmlファイルを表示しています。そのいくつかのルールに基づいて、私はいくつかの単語をハイライトする必要があります。前と次のクリック機能があります。次にクリックすると、次の単語が自動フォーカスされ、強調表示されます。だから、私はすべての言葉を毎回強調したい。しかし、焦点に今ある唯一の単語が異なるcolor.Myコードであるべきである -

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

私は事前にit.Thanksを解決することができませんでした別のsolutions.Butを試してみました。

Answer 1

これは参考になるかもしれません。 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]); 
     } 
    }); 
}) 

に ビューとマークアップと結合：jQueryを使って何かを試してみてください

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