CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jorge Diaz
Jorge Diaz

Reputation: 33

Conditional class based on text inside of div tag

I have a div which prints a status based on I word I add in a custom post type I created in WP, I was looking to add a .class based on the content text of the DIV, I found this example which changes the style (background color) but I am wondering if it's possible to change the .class instead of just changing a style attribute like in the example which changes just the background color.

Here's the example code from there:

    $(function() {
    //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    $('.image-container>.status-tag').each(function(){
        console.log($(this).text());
      var text = $(this).text().toLowerCase();
        switch (text) {
        case 'diesel':
        color = '#ff0000';
        break;
        case 'auto':
        color = '#6dc8bf';
        break;
        default:
        color = '#39d52d';
        }
        $(this).css('background', color);
    });
});

HTML

<!DOCTYPE html>
<body>
 <div class="image-container">
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

By default, the "status" word includes this class "pt-cv-ctf-value" so I guess it should be added with that one.

This is the closest I've been of a solution but don't know how to implement it for my case.

Thanks in advance!

Upvotes: 2

Views: 3218

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157284

You can surely move these to CSS classes and then use addClass() to append these classes to the respective elements.

So what am doing in the below example is, instead of using .css() to assign the background-color, I am using .addClass() method to assign the class instead. Note that you can also achieve the above using custom data- attributes instead of classes, but it's just a matter of choice.

Also note that I am using background so it will override any background-image or background-color you've set as it's a short-hand. You can explicitly use these properties instead if required.

Expanding my explanation further on the below code which I've refactored a bit. Here, instead of using switch-case which might get ugly as and when you start adding more items, I've created a simple object instead to map the words with the class names. Later, am using a ternary operator and using the words as the object keys which later will return the desired class. If the key doesn't exist, I assume that it's default.

$(function() {
  var mapTags = {
    diesel: 'tag-red',
    auto: 'tag-cyan',
    uncategorized: 'tag-green'
  };

  $('.image-container > .status-tag').each(function() {
    var elm = $(this), t = elm.text().toLowerCase();
        elm.addClass(mapTags[t] ? mapTags[t] : mapTags.uncategorized);
  });
});
.tag-green {
  background: #39d52d;
}

.tag-red {
  background: #ff0000;
}

.tag-cyan {
  background: #6dc8bf;
}

.status-tag {
  height: 50px;
  width: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="status-tag">Diesel</div>
  <div class="status-tag">AUTO</div>
  <div class="status-tag">Bleh</div>
</div>

Upvotes: 0

brk
brk

Reputation: 50291

You need to use addClass jquery method

$(function() {
  //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
  $('.image-container>.status-tag').each(function() {
    console.log($(this).text());
    var text = $(this).text().toLowerCase();
    switch (text) {
      case 'diesel':
        className = 'diesel';
        break;
      case 'auto':
        className = 'auto';
        break;
      default:
        className = 'defaultClass';
    }
    $(this).addClass(className);
  });
});
.diesel {
  background-color: blue;
}

.auto {
  background: red;
}

.defaultClass {
  background: #39d52d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
</div>

Upvotes: 0

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

You may use addClass to add classes over your element. Try below code

$(function() {
  //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
  $('.image-container>.status-tag').each(function() {
    console.log($(this).text());
    var text = $(this).text().toLowerCase();
    switch (text) {
      case 'diesel':
        className = 'diesel-color';
        break;
      case 'auto':
        className = 'auto-color';
        break;
      default:
        className = 'default-color';
    }
    $(this).addClass(className);
  });
});
.diesel-color{
  background-color: #ff0000;
}

.auto-color{
  background-color: #6dc8bf;
}

.default-color{
  background-color: #39d52d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
  <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
</div>

Upvotes: 1

Related Questions