Question

我在这里看到了其他if else示例，但没有特别针对jquery“如果点击显示其他隐藏此内容”。这是一个简单的代码示例。我想知道在单击#red时显示.redStuff的最简洁方法，否则在单击相对id时隐藏它并显示其他类。这是HTML：

.redStuff, .blueStuff, .greenStuff {
  display: none;
}

<ul id="color">
  <li id="red"><a href="#">Red</a></li>
  <li id="blue"><a href="#">Blue</a></li>
  <li id="green"><a href="#">Green</a></li>
</ul>

<div class="redStuff">Red Stuff</div>
<div class="blueStuff">Blue Stuff</div>
<div class="greenStuff">Green Stuff</div>

Answer 1

一旦你明白了，就很容易使用数据属性。

CSS

.redStuff, .blueStuff, .greenStuff {
  display: none;
 }

HTML

<ul id="color">
  <li id="red" data-color="red"><a href="#">Red</a></li>
  <li id="blue" data-color="blue"><a href="#">Blue</a></li>
  <li id="green" data-color="green"><a href="#">Green</a></li>
</ul>

<div class="redStuff" data-content="red">Red Stuff</div>
<div class="blueStuff" data-content="blue">Blue Stuff</div>
<div class="greenStuff" data-content="green">Green Stuff</div>

jquery的

       // no need for the ids or classes
       // we set data attributes for the html
  $("li[data-color]").click(function(){
       // next line is for second click, to hide the prev div element
    $("div[data-content]").hide();
       // we are getting the data-color attr value here 
       // and for readibility  we assigned it to a variable called color
    var color = $(this).data("color");
       // find the div with the same content and show 
    $("div[data-content='"+color+"']").show();
  });

jsfiddle link to play with codes

Answer 2

根据布局的复杂性，有多种方法可以解决这个问题。

如果订单在<li>＆{39}与<div>之间的关系相同，则可以使用index()。添加公共类会很有帮助

<div class="redStuff  stuff">Red Stuff</div>

JS

$('#color li').click(function(){
    // "this" is the element event occurred on
    var index = $(this).index();
    // hide all the "stuff" class and show the matching indexed one
    $('.stuff').hide().eq(index).show();

});

或者将data-属性添加到目标特定元素，以便索引顺序变得无关紧要

HTML

<li id="red"><a href="#" data-target=".redStuff">Red</a></li>

JS

$('#color a').click(function(){
   $('.stuff').hide().filter( $(this).data('target') ).show();
});

或者使用ID创建选择器

$('#color li').click(function(){
     $('.stuff').hide().filter('.' + this.id +'Stuff').show();
});

Answer 3

这应该有用。

它不是＆＃34; If Then Else＆＃34;确切地说，但它完成了逻辑目标。

var $stuff = $(".redStuff, .blueStuff, .greenStuff");
var $colors = $("#color li a");
$colors.on("click", function(){
    // get color from parent (li) id
    var color = $(this).parent()[0].id;
    // turn all stuff off (because we don't know what came last)
    $stuff.attr({style: null});
    // turn on clicked stuff class
    $("." + color + "Stuff").attr({style: "display:block;"});
});

演示是here。

如果单击此项显示此其他隐藏此项

3 个答案: