JQuery: Переключить элемент, который щелкнут и скрыть все остальные

Я хочу скрыть любые видимые элементы span, если они видны, и снова переключить их, если элемент щелкнут

<div class="item">
    <a href="">element1</a> <span>span1</span>
    <br>
</div>

<div class="item">
    <a href="">element2</a> <span>span2</span>
    <br>
</div>

<div class="item">
    <a href="">element3</a> <span>span3</span>
    <br>
</div>

<div class="item">
    <a href="">element4</a> <span>span4</span>
    <br>
</div>

JS

$('.item span').hide();

var all_spans = $('.item a').parent().find('span');

$('.item a').click(function(e) {

    e.preventDefault();
    // hide all span
    all_spans.hide();
    $this = $(this).parent().find('span');
    // here is what I want to do
    if ($this.is(':hidden')) {
        $(this).parent().find('span').show();
    } else {
        $(this).parent().find('span').hide();
    }

});

живой пример http://jsfiddle.net/BGSyS/

проблема возникает, когда я нажимаю, например, 'element 1' 'span1' все еще отображается, и я хочу переключить этот

Ответы

Ответ 1

 $('.item span').hide();

$('.item a').click(function(e){

    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('span');
    $(".item span").not($this).hide();

    // here is what I want to do
    $this.toggle();

});

Отметьте демо

Обновить с объяснением:

Проблема заключается в том, что вы скрываете все промежутки, вы также скрываете текущий span = > все пролеты имеют одинаковое состояние (скрытое), а ваша следующая строка отображает его снова. Вы должны исключить текущий элемент при скрытии и использовать метод toggle для переключения его состояния (проще, чем использовать, если нужно проверить)

Другая проблема заключается в попытке избежать неявного глобального использования с помощью var для объявления $this:

var $this = $(this).parent().find('span');

Ответ 2

Это может быть намного проще: Обновлено Fiddle

var all_spans = $('.item span').hide();

$('.item a').click(function(e){
    var thisSpan = $(this).parent().find('span'),
        isShowing = thisSpan.is(":visible");

    // Hide all spans
    all_spans.hide();

    // If our span *wasn't* showing, show it
    if (!isShowing) {
        thisSpan.show();
    }

    e.preventDefault();
});

Основная проблема с вашим кодом заключалась в том, что вы проверяли, был ли элемент a видимым, а не проверка того, был ли span.

Ваш код также стал жертвой Ужас неявных глобалов в этой строке:

$this = $(this).parent().find('span');

..., который создает глобальную переменную $this, потому что вы ее нигде не объявляли.

Ответ 3

Вы можете скрыть все промежутки, используя селектор диапазона, а затем используя ключевое слово $(this), чтобы найти диапазон рядом с нажатой ссылкой:

$(".item a").click(function() {
  // Hide all item spans
  $(".item span").hide();
  // Show the element next to this
  $(this).next().show();
});

Ответ 4

begin snippet: js hide: false

Язык: lang-js

function itemshow(n,e){ 
   var idx = "num_"+n;
   $(".item_title").each(function(){
      var idn = $(this).next().attr("id");
      if (idn == idx){
        $("#"+idn).toggle();
      }else{
        $("#"+idn).hide();
      }
   });
}

Язык: lang-css

.item_desc{
   display: none;
 }

Язык: lang-html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div class="div_body">
   <div class="item_title" onclick="itemshow(1,this)">        
        1) კითხვა                           
  </div>
      <div class="item_desc"  id="num_1">
        პასუხის ველი                           
      </div> 
   <div class="item_title" onclick="itemshow(2,this)">        
        2) კითხვა                           
  </div>
      <div class="item_desc"  id="num_2">
        პასუხის ველი                           
      </div> 
   <div class="item_title" onclick="itemshow(3,this)">        
        3) კითხვა                           
  </div>
      <div class="item_desc"  id="num_3">
        პასუხის ველი                           
      </div> 
</div>

конец фрагмента