javascript - Change div background color based on text inside div

Question

Welcome To Ask or Share your Answers For Others

javascript - Change div background color based on text inside div

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

javascript - Change div background color based on text inside div

On this site I have a "status tag" (Diesel, Auto, Manual, etc) on each inventory picture. I want the background color of that tag to be changed based on the text that is within the DIV.

This is the code that I have so far:

<script>
$(function() {
    var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    switch (text) {
     case 'Diesel':
        color = '#ff0000';
        break;
     case 'AUTO':
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $('.image-container>.status-tag').css('background', color);
});
</script>

The default color is showing up, but for some reason, I cannot get the specified color to show based on the text inside the div.

This is not my own code, I found it on another thread(original code here), but can't seem to get it to work on my site. any help would be appreciated.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:05:28+0000

$(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);
    });
});

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

Categories

javascript - Change div background color based on text inside div

javascript - Change div background color based on text inside div

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags