jqueryotrs

Change color of specific title with jquery


Im looking to change title text color if title is equal to specific text. In this case i try to change color, when title is "Guilherme". Some help?

Part of webpage link:

xpto.com/otrs/index.pl?Action=AgentTicketZoom;TicketID=17564

Html code:

enter image description here

jquery script:

$(document).ready(function() {
  setTimeout(function() {
    const Action = Core.Config.Get("Action");
    const SupportedActions = ["AgentTicketZoom"];
    if ($.inArray(Action, SupportedActions) !== -1) {
      if (Action === "AgentTicketZoom") {
        $("label:contains('Firstname:')").hide()       
        changeColor();
      }
    }

    function changeColor() {
      $("select[title='Firstname:']"){
        if ($(this).find('.Guilherme').length > 0){
          $(this).css("color", "red");
        }
      });
    }
  })
});

Solution

  • You can set colours via css using attribute selectors:

    p[title=Guilherme] {
      color: red; 
    }
    <label>Firstname:</label>
    <p class='Value FixedValueSmall' title="Guilherme">
      Guilherme
    </p>
    <p class='Value FixedValueSmall' title="Not Guilherme">
      Not Guilherme
    </p>

    If you're intent on using jquery, the same selectors can be used:

    $("p[title=Guilherme]").addClass("red");
    
    // or .css if you don't like classes
    //$("p[title=Guilherme]").css("color", "red");
    .red {
      color: red; 
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <label>Firstname:</label>
    <p class='Value FixedValueSmall' title="Guilherme">
      Guilherme
    </p>
    <p class='Value FixedValueSmall' title="Not Guilherme">
      Not Guilherme
    </p>