0

Доброго времени! имеется такой 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>

в блоке с id pescont может быть любое количество блоков и одни из них имеют класс hidrad или id начинающиеся с perc и оканчивающееся цифрой. задача при клике на один из блоков скрывать все остальные кроме кликнутого и блоков с классом hidrad. Пробовал сделать такую функцию но она почему то не работает

function selectperson (id) {

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


}

В нее передается цифра выбранного блока, но видимо я где то ошибся подскажите что тут не так?

1
  • все ли дивы которые надо скрыть имеют класс personajeinl? или этот класс может отсутствовать на некоторых дивах?
    – Grundy
    9 дек 2016 в 13:42

3 ответа 3

1

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>

0

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>

Как вариант. А то что у вас написано, то неправильный селектор. Для селектора надо было использовать $("#pescont > div:not('.hidrad')") например.

4
  • $(this)[0]? серьезно?
    – Grundy
    9 дек 2016 в 13:38
  • не :) На скоро написал не подумав. Хех) поправил..
    – Moonvvell
    9 дек 2016 в 13:40
  • @Grundy а можно ли добавить какой то эфект и можно ли сюде его как то строить? попробовал arr[i].fadeOut(); но видимо это вобще не вариант так обращаться
    – dantelol
    9 дек 2016 в 13:42
  • @dantelol, без знания что такое arr не могу ничего сказать, если это объект jQuery, То нет нужды выбирать по индексу - вызывай сразу arr.fadeOut
    – Grundy
    9 дек 2016 в 13:44
0

Внесу свои 5 копеек, в противовес громоздкости - однострочник Ну и плюс, разные решения дают больше знаний (=

function selectperson(item){
    $('.personajeinl').eq(item-1).siblings('.personajeinl').hide()
}
 //Выбираем нужный нам див из массива дивов с классом `personajeinl`
 //Выбираем "братьев" - все элементы того же родителя, за исключением исходного
 //у которых имеется класс `personajeinl`
 //каждый скрываем
5
  • вот только непонятно что делает приведенный однострочник.
    – Grundy
    9 дек 2016 в 13:51
  • @Grundy теперь все поэтапно расписано. Мне казалось, синтаксис достаточно самодокументирован тут
    – SLy_huh
    9 дек 2016 в 13:54
  • Без html для которого этот код должен применяться - все еще не полный. Для разметки из вопроса - этот код работает не так как ожидалось
    – Grundy
    9 дек 2016 в 13:56
  • Ну хотя бы так.
    – Grundy
    9 дек 2016 в 14:08
  • @Grundy проверил специально с разметкой из вопроса; единственный минус - не увидел, что там итерация пунктов начинается с 1, уже поправил. В остальном все работает как и ожидалось
    – SLy_huh
    9 дек 2016 в 14:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.