Good time! there is such HTML

<div id="pescont"> <div class="personajeinl" id="perc1"onclick="javascript:selectperson ('1');"></div> <div class="hidrad"></div> <div class="personajeinl" id="perc2"onclick="javascript:selectperson ('2');"></div> <div class="hidrad"></div> <div class="personajeinl" id="perc3"onclick="javascript:selectperson ('3');"></div> <div class="hidrad"></div> </div>

In the block with id pescont there can be any number of blocks and some of them have the class hidrad or id starting with perc and ending with a digit. The task when clicking on one of the blocks is to hide all the others except the clicked and blocks with the hidrad class. Tried to make such a function but for some reason it does not work.

 function selectperson (id) { $('#pescont *[id != "perc'+id+'"] [class != "hidrad"]').hide(); }

The figure of the selected block is transferred to it, but apparently I was mistaken somewhere, tell me what is wrong here?

  • Do all the divas that need to be hidden have a personajeinl class? or may this class be absent on some divas? - Grundy

3 answers 3

 function selectperson (element) { $('.personajeinl').each(function(){ if (element != this) $(this).hide(); }); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pescont"> <div class="personajeinl" id="perc1"onclick="javascript:selectperson (this);">1</div> <div class="hidrad">22</div> <div class="personajeinl" id="perc2"onclick="javascript:selectperson (this);">1</div> <div class="hidrad">22</div> <div class="personajeinl" id="perc3"onclick="javascript:selectperson (this);">1</div> <div class="hidrad">22</div> </div>

As an option. And what you have written is the wrong selector. For the selector, you would use $("#pescont > div:not('.hidrad')") for example.

  • $(this)[0] ? Seriously? - Grundy
  • :) Not soon wrote on without thinking. Heh) corrected .. - Moonvvell
  • @Grundy is it possible to add some effect and can you build it like that? tried arr [i] .fadeOut (); but apparently it just is not an option to handle so - dantelol
  • @dantelol, without knowing what arr is, I can’t say anything, if it is a jQuery object, then there is no need to select by index - arr.fadeOut immediately arr.fadeOut - Grundy

 function selectperson (item) { var arr = document.getElementsByClassName("personajeinl"); for(var i=0; i<arr.length; i++){ arr[i].style.display = "none"; } item.style.display = ""; } 
 .personajeinl{ border:2px solid red; cursor:pointer; } 
 <div id="pescont"> <div class="personajeinl" id="perc1"onclick="selectperson(this)">1111</div> <div class="hidrad"></div> <div class="personajeinl" id="perc2"onclick="selectperson(this)">2222</div> <div class="hidrad"></div> <div class="personajeinl" id="perc3"onclick="selectperson(this)">3333</div> <div class="hidrad"></div> </div>

    I will make my 5 kopecks, in contrast to the bulkiness - one-liner Well, plus, different solutions give more knowledge (=

     function selectperson(item){ $('.personajeinl').eq(item-1).siblings('.personajeinl').hide() } //Выбираем нужный нам див из массива дивов с классом `personajeinl` //Выбираем "братьев" - все элементы того же родителя, за исключением исходного //у которых имеется класс `personajeinl` //каждый скрываем
    • that's just not clear what the one-liner does. - Grundy
    • @Grundy is now all staged. It seemed to me that the syntax is rather self-documented here - SLy_huh
    • Without html for which this code should be applied is still not complete. For the markup from the question - this code does not work as expected - Grundy
    • Well, at least that way. - Grundy
    • @Grundy checked specifically with the markup from the question; the only negative is that I didn’t see that the iteration of the points there starts from 1, already corrected. Otherwise, everything works as expected - SLy_huh