JQuery：切换单击的元素并隐藏所有其他元素

I want to hide any visible span elements if any is visible, and toggle it again if a element is clicked

我希望隐藏任何可见的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();
    }

});

live example http://jsfiddle.net/BGSyS/

实例http://jsfiddle.net/BGSyS/

the issue is when I click for example 'element 1' 'span1' is still visible and I want to toggle this

问题是,当我点击例如'元素1'时,'span1'仍然可见,我想切换它

4 个解决方案

#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();

});

Check demo

Update with explanation:

更新说明:

The problem is when you hide all spans, you also hide the current span => all spans have the same state (hidden), and your next line display it again. You have to exclude the current element when hiding and use toggle method to toggle its state (simpler than using if to check)

问题是当您隐藏所有跨度时,您还隐藏当前跨度=>所有跨度具有相同的状态(隐藏),并且您的下一行再次显示它。隐藏时必须排除当前元素,并使用切换方法切换其状态(比使用if检查更简单)

Another problem is try to avoid implicit global by using var to declare $this:

另一个问题是尝试通过使用var声明$ this来避免隐式全局:

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

#2

It can be much simpler than that: Updated 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();
});

The main problem with your code was that you were checking whether the a element was visible, rather than checking whether the span was.

您的代码的主要问题是您正在检查元素是否可见,而不是检查跨度是否可见。

Your code also fell prey to The Horror of Implicit Globals on this line:

你的代码也成为了暗杀全球恐怖的牺牲品:

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

...which creates a global variable $this because you didn't declare it anywhere.

...它创建了一个全局变量$ this,因为你没有在任何地方声明它。

#3

You can hide all the spans by using a span selector, then using the $(this) keyword to find the span next to the clicked link:

您可以使用跨度选择器隐藏所有跨度,然后使用$(this)关键字查找单击链接旁边的跨度:

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

#4

-1

begin snippet: js hide: false

开始片段:js hide:false

language: 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();
      }
   });
}

language: lang-css

.item_desc{
   display: none;
 }

language: 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) Question                           
  </div>
      <div class="item_desc"  id="num_1">
        Answer                           
      </div> 
   <div class="item_title" onclick="itemshow(2,this)">        
        2) Question                           
  </div>
      <div class="item_desc"  id="num_2">
        Answer                          
      </div> 
   <div class="item_title" onclick="itemshow(3,this)">        
        3) Question
  </div>
      <div class="item_desc"  id="num_3">
        Answer                          
      </div> 
</div>

end snippet

#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();

});