I do not understand why the icon color doesn't change on Blogger homepage individually?-CodePudding

I am trying to put different color on eye depending on how much people have visited.

On blogger static post, the code work great. But when I go to my homepage, it doesn't change the eye color base on numeric value that I have set it out. It only show 1 color only instead of individually with different numeric value and it will change the color every time i clicked on load more article on the bottom of the homepage.

What is the problem here? I hope someone could tell me. I am not really good at coding, just find out the code from internet and mixed it up after by looking through other tutorial.

Here's the website,

Post view

2nd Attempt

I use this code.

    // coloring eye
$.fn.colorize = function () {
   return this.each(function() {
      var $this = $(this);
      $this.css({color: count < 200 ? "grey"
                      : count < 500 ? "yellow"
                      : "red"});
   });
};
$("i.far.fa-eye").colorize();

The result for this attempt:

Homepage view

Post view

As a result i would prefer to choose 2nd attempt, but the problem is this attempt showing result as a whole code for icon eye color instead individual article on homepage view perspective.

Both code give good result when showing from post view perspective.

CodePudding user response：

IDs need to be unique
The fn needs to be outside the each
The count has to be passed to the function

Here is a working version without FN

You need to call this AFTER the icons have been rendered i.e. AFTER the $.each($("a[name]"), function (i, e) { ............ }); NOT inside

$("i.far.fa-eye").each(function() {
  const count =  $(this).closest(".entry-meta").find(".viewsini").text().replace(/\D/,"");
//  console.log(count)
  $(this).css({color: count < 200 ? "grey" : count < 500 ? "yellow" : "red" });
})

.fa-eye:before {
    content: "