display:None is not being applied

Asked

Viewed 1,107 times

0

I have the following function:

  function exibeSelectUl () {

      $(".selectOptions ul > li").each(function() {

          alert($.trim($(this).text()) +'==='+ $.trim($(".selectOptions .selecionada").html()));

          if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())) 
               $(this).css("display","none");
          else 
               $(this).css("display","block");
      });

  }

The goal here is to go through each li and check whether your html() is equal to text() of a div that exists in the code. If so, this li will have his display setado to None.

As you can see, there is a Alert which shows this and, in one of the options, always the condition will be true. however the display:None is not being applied.

Where is the error?

This can be verified in

http://www.hotplateprensas.com.br/estilos/aa.php

jquery css3

  • You have already tried to replace === with == only?

  • yes, same thing. I’m applying**$(this). css('display','None');** to the right element?

  • From what I understand you want to make a select using a list <ul>. When I click on the list, appear the options "one", "two", "three" and "four". When I click on the "three" option, for example, the others disappear, indicating that I selected the "three" option. What would be the error then? I played in Jsfiddle and is normally missing the options not selected.

  • When you click the down arrow (opens the select) for the first time after opening the page, note that there is a repeated option. Get it? So the purpose of this function is exactly this: to compare the text of div with the html text of li, if they are equal, display:None in the said li. And, this display:None is not being applied in the said li. That is, she is being exhibited in ul But note that when you open the page for the first time and have not yet clicked on select, if you see on inspector, will notice a read with None display

2 answers

0

@Renato-Diniz, based on your guidance, I studied your code a lot and then I fixed my.

I’d like you to evaluate and tell me what you think.

Can be viewed online at http://www.hotplateprensas.com.br/estilos/

Stayed like this:

CSS

@charset "utf-8";
/* CSS Document */
.selectOptions {
    display:block;
    position:relative;
    width:200px;
    height:35px;    
}
.selectOptions select {
    display:none;
}
.selectOptions .selecionada {
    display:block;

}
.selectOptions .selecionada:after {
    display: block;
    position: absolute;
    content: "";
    top: 1px;
    right: 1px;
    width: 33px;
    height: 33px;
    background-image: url(../_imgs/setaBaixo.jpg);
}
.selectOptions .selecionada.setaBaixo:after {
    background-image: url(../_imgs/setaBaixo.jpg);
}
.selectOptions .selecionada.setaCima:after {
    background-image: url(../_imgs/setaCima.jpg);
}

.selectOptions ul {
    display:none;
    width:100%;
}
.selectOptions ul li{
    cursor:pointer;
}

.selectOptions ul li,
.selectOptions .selecionada {
    position:relative;
    width:94%;
    height:34px;
    line-height:34px;   
    padding:0 3% 0 3%; 
    border-bottom: rgb(200,200,200) 1px solid;
    background-color:rgb(240,240,240);
}

.selectOptions  ul li:hover,
.selectOptions  .selecionada {
    background-color: rgb(200,200,200);
}

jQuery

$(document).ready(function(e) {
  /*
    $('form').submit((function(e) {

       }
    ));
  */

  $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html());
  /*popula as li's*/
  $(".selectOptions select > option").each(function() {
      if($(this).is(':first-child')) $(".selectOptions ul").append("<li value='"+this.value+"' style='display:none;'>"+this.text+"</li>");    
      else $(".selectOptions ul").append("<li style='display:block;' value='"+this.value+"'>"+this.text+"</li>");
  });

  function exibeSelectUl () {

      $(".selectOptions ul > li").each(function() {

          if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())) 
               $(this).css("display","none", "important");
          else   
               $(this).css("display","block","important");

      });

       $(".selectOptions ul").css("display","block");

  }

  contador=0;

   $(".selectOptions .selecionada").click(function(e) {

      exibeSelectUl();

      quantasLis = $(".selectOptions ul li").length;

      if(contador % 2 == 0) {                 

          $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions ul li").css("display","none").slideDown(400); 

          if(quantasLis > 4) {      
              $(".selectOptions ul").css('height', '175px');
              $(".selectOptions ul").css("overflow-y", "scroll") ;
          } else {
              $(".selectOptions ul").css('height', 'auto');
              $(".selectOptions ul").css("overflow-y", "auto") ;
          }

      } else {    

          $(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions ul li").slideUp(400, function(){
              $(".selectOptions ul").css("overflow-y", "hidden");
          });
      }

      contador++;

      e.stopPropagation();

  });   


  $(document).on('click',function(e){
      if(
           $(".selectOptions ul").css("overflow-y") == "auto" ||
           $(".selectOptions ul").css("overflow-y") == "scroll") {
               $(".selectOptions .selecionada").trigger("click");
      }
  });

/*ai clicar na li, busca correspondência na select option e o checa (marca)*/
 //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
 $( '.selectOptions ul li' ).on( 'click', function( evt ){ 
     /*Joga a li selecionada a label*/
     $(".selectOptions .selecionada").html($(this).html());
     /*Joga a li selecionada ao topo da ul*/
     $($(this).closest('ul')).prepend($(this)); 
      // Armazena nome do maos que quer selecionar
      var li = $(this).attr("value");
      // Guarda em opcao o elemento que retornar do filtro que vai testar entre as
      // options possíveis
      var opcao = $('.selectOptions select option').filter(function() {
          // testa entre as options qual delas tem o mesmo conteúdo que o desejado
          return $(this).attr('value') === li;
      });

      exibeSelectUl();

      // Redefine o atributo do elemento encontrado pra selecionado.
      opcao.attr('selected', true);              

 });

});

html

  <div class="selectOptions">

    <select required>
      <option value="1">Um</option>
      <option value="2">Dois</option>
      <option value="3">Três</option>
      <option value="4">Quatro</option>
      <option value="5">Cinco</option>
      <option value="6">Seis</option>
      <option value="7">Sete</option>
      <option value="8">Oito</option>
    </select>
    <label class="selecionada"></label>
    <ul></ul>

  </div>

  • I see that you added the 'Important' in the . css(..) command, it was better anyway, without having to create the 'Hidden' class. I can’t say for sure why it wasn’t working, but I think it was a problem with the "display" elements, maybe the <ul> element display was overwriting the <li> element, so I added ! Important (which prevents another class from overwriting a property of that element) and ended up solving.

  • @Renato Diniz. But, and there, it’s cool? Gives ideas to improve this plugin. Maybe, who knows, a code optimization.

  • I would only improve the background color of the selected element because it is too dark in relation to the text and gives the impression that the list is disabled.

  • there’s one thing that’s not working, if you go on the site and open and the ul, will realize that there is a space between ul open and the scroll bar that I can’t take out. This lets you see the buttons at the bottom. Another difficulty I’m having is how to put the scroll bar to receive also the effect of slideDown() slideup()

0

Add a class to your CSS containing the display:none:

.hidden {
  display:none !important;
}

In the code that adds the options of select in the list, check if the option is selected, if it is, add the element to the list as it was already being done, but with the class 'Hidden' (I also added the class 'optionList' only to facilitate the selection of li afterward):

if($(this).is(':selected')){
    $(".selectOptions ul").append("<li class='opcaoLista hidden' value='"+this.value+"' >"+this.text+"</li>");
} 
else {
    $(".selectOptions ul").append("<li class='opcaoLista' value='"+this.value+"'>"+this.text+"</li>");
}

In the method exibeSelectUl, add or remove the class 'Hidden', instead of . css("display", "None):

 $(".opcaoLista").each(function() {
      //alert($.trim($(this).text()) +'==='+ $.trim($(".selectOptions .selecionada").html()));
      if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())){
         $(this).addClass("hidden");
      } else {
         $(this).removeClass("hidden");
         $(this).show();
      }
  });

Link to the example on Codepen

  • I understood what you did but I didn’t understand why the code reacted like that. Because when you create a class for display:None and calls her from the jQuery works and when I do $(this). css("display","None");, it doesn’t work?

  • Another question: why was it necessary to remove the class Hidden, , then yes, call the class Shown? Why doesn’t it work just by doing display:block ?

  • And because it was necessary to add !Important to the display?

  • It was necessary to remove the class Hidden because she is marked with the !Important, preventing the .show() work.

Browser other questions tagged jquery css3

You are not signed in. Login or sign up in order to post.