Replace background-image of :after

Question

I have a div with a pseudo-class :after where I create a square and place inside a figurine of an arrow down.

I’m trying, with the code below, by clicking on this div replace the figurine with a similar one:

$(document).ready(function(e) {
  contador = 0;
  $(".selectOption").click( function() {

      if(contador % 2 == 0) {
          $(".opcoes").css("overflow", "visible") ;
          $(".selectOption:after").css("background-image", "url(_imgs/setaBaixo.jpg)");
      } else {
           $(".opcoes").css("overflow", "hidden");         
          $(".selectOption:after").css("background-image", "url(_imgs/setaCima.jpg)");
      }

      $('.opcoes li').click(function(){ $($(this).closest('ul')).prepend($(this)); })

      contador++;
  }); 


  $("#select > option").each(function() {
      $(".opcoes").append("<li id="+this.value+">"+this.text+"</li>");
  });

});

But the figure does not replace.

Answer 1

You cannot change the pseudo-element :after because technically it is not part of the DOM, so it is inaccessible via Javascript (jQuery). What you can do is add new classes to the :after:

CSS classes with backgrounds:

.selectOption.setaBaixo:after{
    background-image: url(_imgs/setaBaixo.jpg);
}

.selectOption.setaCima:after{
    background-image: url(_imgs/setaCima.jpg);
}

Code:

$(document).ready(function(e) {
  contador = 0;
  $(".selectOption").click( function() {

      if(contador % 2 == 0) {
          $(".opcoes").css("overflow", "visible") ;
          $(this).addClass("setaCima").removeClass("setaBaixo");
      } else {
           $(".opcoes").css("overflow", "hidden");         
          $(this).addClass("setaBaixo").removeClass("setaCima");
      }

      $('.opcoes li').click(function(){ $($(this).closest('ul')).prepend($(this)); })

      contador++;
  }); 


  $("#select > option").each(function() {
      $(".opcoes").append("<li id="+this.value+">"+this.text+"</li>");
  });

});

The snippet below changes the color, but has the same effect for images:

$(document).ready(function(e) {
  contador = 0;
  $(".selectOption").click( function() {

      if(contador % 2 == 0) {
          $(".opcoes").css("overflow", "visible") ;
          $(this).addClass("setaCima").removeClass("setaBaixo");
      } else {
           $(".opcoes").css("overflow", "hidden");         
          $(this).addClass("setaBaixo").removeClass("setaCima");
      }

      $('.opcoes li').click(function(){ $($(this).closest('ul')).prepend($(this)); })

      contador++;
  }); 


  $("#select > option").each(function() {
      $(".opcoes").append("<li id="+this.value+">"+this.text+"</li>");
  });

});

.selectOption:after{
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: red;
}

.selectOption.setaBaixo:after{
	background: blue;
}

.selectOption.setaCima:after{
	background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectOption">
Clique em mim!
</div>