仅显示/隐藏同级 div jquery

Question

我的网页上有多个具有相同 class 名称的 div。当我单击跨度 (+/-) 时，每个具有相同 class 名称的 div 都会显示/隐藏。我想在单击 +/- 按钮时仅显示/隐藏同级 div。我尝试了很多来寻找解决方案，但无法找到我的解决方案。谢谢...

HTML:

<div class="abc">
  <div class="abc1">
    Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch of Roman grandeur & grace. We offer one of the largest banquet halls in the city.<span>(-)</span>
  </div>
  <div class="abc2">
    Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch<span>(+)</span>
  </div>
</div>

<div class="abc">
  <div class="abc1">
    Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch of Roman grandeur & grace. We offer one of the largest banquet halls in the city.<span>(-)</span>
  </div>
  <div class="abc2">
    Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch<span>(+)</span>
  </div>
</div>

Jquery:

$(document).ready(function() {
    $(".abc2 span").click(function(){
        $(".abc2").hide();
        $(".abc1").show();
    });
    $(".abc1 span").click(function(){
        $(".abc1").hide();
        $(".abc2").show();
    });
});

Fiddle:

http://jsfiddle.net/berqK/42/

Answer 1

您必须使用 this、

来定位元素

$(document).ready(function() {
    $(".abc2 span").click(function(){
        var par = $(this).parent(".abc2").hide();
        par.prev(".abc1").show();
    });
    $(".abc1 span").click(function(){
        var par = $(this).parent(".abc1").hide();
        par.next(".abc2").show();
    });
});

DEMO

您可以像下面这样优化解决方案，

$(document).ready(function() {
    $(".abc1,.abc2").find("span").click(function(){
        var par = $(this).parent().hide(), isAbc1 = par.is(".abc1");
        par[isAbc1 ? "next" : "prev"](isAbc1 ? ".abc2" : ".abc1").show();
    });
});

仅显示/隐藏同级 div jquery

Show/ Hide only sibling divs jquery

jquery

siblings

show-hide

DEMO

DEMO