如何根据文本值显示不同的图标

Question

I'm using jQuery.countdown to display multiple instances of several expiration dates on the same page and I have it set to display the number of days remaining (eg "45 days"). I've designed it so by default there is an associated background image of "icon-conditional-rule-pass.png".

I have the code that changes to icon-conditional-rule-fail.png if it shows 00 days, which works fine, but where I am struggling is that I want to create a period where a caution icon will display from lets say 1-60 days, I obviously will need to have "60 Days", "59 Days", etc., which is fine, I just can't figure out how (or if it's possible) to manipulate the code to work with multiple values. I'm assuming this can be done?

I've tried modifying/manipulating my code in all sorts of ways, but whenever I test, it only seems to work on the first text value and ignores the rest. Searching the web yields no results to what I'm trying to achieve.

$(".countdown").filter(function() {
    return $(this).text() === "00 Days";
  }).css("background-image", "url(/assets/icon-conditional-rule-fail.png)");

Want a single script that I can plug in multiple values into and have it return the desired caution image. I do want to create multiple scripts (eg 1 for displaying caution 30 days before expiration, 1 for 60, etc., but I'm assuming I'll just need to change the .countdown field to something else.

Answer 1

Personally, I'd break this up into four steps:

1. Create an array of ranges , which includes the number of days and the associated icon
2. For each .countdown , parse the amount of "Days" into a number
3. Using that number, find the corresponding range from step 1
4. Use the icon for that range

Not only does this leave you with one concise and reusable method, but it also allows you to update the ranges and/or icons easily by simply editing the ranges array.

 const ranges = [ { days: 60, //60+ days icon: "icon-for-60plus-days.png" }, { days: 30, //30-59 days icon: "icon-for-30plus-days.png" }, { days: 1, //1-29 days icon: "icon-for-1plus-days.png" }, { days: 0, //0 days icon: "icon-conditional-rule-fail.png" } ]; $(".countdown").css("background-image", function() { //For each .countdown const daysAsInt = Number($(this).text().replace(" Days", "")); //Get the days as an integer const range = ranges.find(i => daysAsInt >= i.days); //Find the range in the array return range && `url(/assets/${range.icon})`; //Set the background-image to the corresponding icon }); //FOR DEMO PURPOSES ONLY $(".countdown").each(function() { console.log($(this).text(),": ", $(this).css("background-image")); }); 

 span { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="countdown">70 Days</span> <span class="countdown">40 Days</span> <span class="countdown">05 Days</span> <span class="countdown">00 Days</span>