Как скрывать блоки при клике на 3 дочерний блок, не имеющий id?

Question

[Alexander Lashchevsky]

Здравствуйте!

Есть блоки, засунутые в родительский. И ещё несколько блоков.

<div id="block">
   <div>Содержимое 1</div>
   <div>Содержимое 2</div>
   <div>Содержимое 3</div>
   <div>Содержимое 4</div>
</div>

<div id="other1"></div>
<div id="other2"></div>
<div id="other3"></div>

Дочерние блоки ни идентификаторов, ни классов не имеют.

Нужно сделать так, чтобы по третьему дочернему диву внутри div id block скрывались блоки other1, other2 и other3. При клике на другие дочерние - вновь показывались.

Как это реализовать?

Спасибо!

С уважением,
Александр.

Answer 1

[Евгений Калибров]

Например так:

// При клике на третий, скрываем все другие
$('#block > div:nth-child(3)').on('click', function(){
    $("#other1, #other2, #other3").hide();
});

// При клике на другие кроме третьего, показываем
$('#block > div:not(:nth-child(3))').on('click', function(){
    $("#other1, #other2, #other3").show();
});

Comments

[Евгений Калибров]

Поправил, сначала не правильно понял задачу.

[Alexander Lashchevsky]

Спасибо! Использовал Ваше решение.

Answer 2

[Александр Цымбал]

$("#block > div:eq(3)").on("click touchend",function(){ 
  $("#other1, #other2, #other3").show(); //ну или анимация какая-нибудь
});

только вот не помню в eq нужно указать либо 3 (если начинать с 1) или 2 (если начинать с 0) - не помню, с чего начинается отсчет в js. В php с 0, в css - с 1.

Comments

[Александр Цымбал]

а, ну селектор-то в css-стиле - значит, скорее всего отсчет с 1 начинается, значит правильно, нужно указывать 3

[Alexander Lashchevsky]

Спасибо. Попробую. Я так понял, что этот скрипт при клике показывает эти блоки?

[Александр Цымбал]

Александр Лащевский: да, при клике (click - для мыши, touchend - для окончания касания пальцем. если с touchend будут проблемы, можно заменить на touchstart - это событие начала касания)

Answer 3

[Jeiwan]

Как-то так:

$("#block > div:first-child + div + div").click(...)

Answer 4

[algebris]

по-компактнее типа...

var set = $("#other1, #other2, #other3");
$("#block").on("click touchend", "div", function() {
  if($(this).index() == 2) {
    set.hide();
  } else {
    set.show();
  }
});