如何根據文本值顯示不同的圖標

Question

我正在使用jQuery.countdown在同一頁面上顯示多個到期日期的多個實例，並將其設置為顯示剩余天數（例如“45天”）。 我設計了它，所以默認情況下有一個相關的背景圖片“icon-conditional-rule-pass.png”。

我有更改為icon-conditional-rule-fail.png的代碼，如果它顯示00天，這很好，但我正在努力的是我想創建一個警告圖標將顯示的時間段讓我們說1- 60天，我顯然需要“60天”，“59天”等，這很好，我只是無法弄清楚如何（或者是否可能）操縱代碼來處理多個值。 我假設這可以做到嗎？

我試過以各種方式修改/操作我的代碼，但每當我測試時，它似乎只對第一個文本值起作用而忽略其余的。 搜索網絡不會產生我想要實現的結果。

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

想要一個我可以插入多個值的腳本，讓它返回所需的警告圖像。 我確實想要創建多個腳本（例如，1表示在到期前30天顯示警告，1表示60，等等，但我假設我只需要將.countdown字段更改為其他內容。

Answer 1

就個人而言，我將其分為四個步驟：

1. 創建ranges數組，其中包括days和關聯的icon
2. 對於每個.countdown ，將“Days”的數量解析為數字
3. 使用該編號，從步驟1中找到相應的范圍
4. 使用該范圍的圖標

這不僅為您提供了一種簡潔且可重復使用的方法，而且還允許您通過簡單地編輯ranges數組來輕松更新范圍和/或圖標。

 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>