Replace background-image by: after

Question

Replace background-image by: after

Navigation

#1 by (0 votes)

1

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

I'm trying, with the code below, to click 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 it.

jquery css3

asked by anonymous 30.09.2017 / 01:00

1 answer

Problem with numpy array Array has values, but its length is zero [closed]

score 0 · Answer 1

You can not change the :after pseudo-element 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 :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 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><divclass="selectOption">
Clique em mim!
</div>