JQuery 显示隐藏菜单中的多个 DIV 以及 DIV 内的菜单

Question

我是 JQuery 新手。我正在尝试显示和隐藏多个 div。我有一个显示 A、B、C 的菜单。当我单击 A 时，会出现 div A1。 Div A1 中有一个菜单，显示 1、2、3 等。当我单击此菜单中的 2 时，A1 消失并出现 A2。当我单击 B 时，当前可见的 div 消失并出现 B1。 B1 有一个显示 1、2、3 的菜单。单击 2 时，B1 被 B2 替换。等等——我想你已经明白了。

这是我的 html：

<div class="thework"><a href="#" class="A">A</a> <a href="#" class="B">B</a> <a href="#" class="C">C</a></div>
<div class="work-A-link1">A1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-A-link2">A2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-A-link3">A3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link1">B1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link2">B2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link3">B3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link1">C1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link2">C2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link3">C3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>

这是与之配套的代码：

$(document).ready(function() {
$('div[class^=work-]').hide();
$(".A").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-A-link1]").fadeIn();
});
$(".B").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-B-link1]").fadeIn();
});
$(".C").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-C-link1]").fadeIn();
});
$('[class^=link]').click(function() {
    $('div[class^=work-]').hide();
    var $this = $(this);
    var x = $this.attr("className");
    $(".work-A-" + x).fadeIn();
    return false;
});
});

该代码仅适用于 div“A”，并且我必须单独对每个 div 进行编号，这似乎效率很低。我尝试过使用 split() 来收集类名并定位相应的 div，但我没有编码技能。有一个优雅的解决方案吗？

Answer 1

如果你可以在 HTML 中拆分类，我有不同的方法？

例如，div

您可以将它们更改为吗？

如果是这样，这似乎可以工作.. 稍后将添加一个小提琴 添加小提琴

$('.work').hide();
   $(".thework a").click(function() {
      var letter = $(this).attr("class"); // link class is also in work class 
         $(".work").hide(); // hide all work class
         $(".work.link1."+letter).fadeIn(); //show the relevant work class
   });


   $('.work a').click(function() {
     var pLink = $(this).attr("class"); //gets the link# class
     var pLetter = $(this).parent().attr("class").split(' ')[1]; //gets the relevant letter if letter is 2nd class in array  index 1

     if ($(this).parent().hasClass(pLink)) {
        //do nothing
     } else {

     $(this).parent().hide();
     $("." + pLetter + "." + pLink).fadeIn(); // produces the .letter.link# CSS selector required
   }

   return false;
});

工作示例：这里

Answer 2

你可以这样做：

$(document).ready(function() {
   $('div[class^=work-]').hide();
   var letters = ["A", "B", "C"]; //Put all posible letters here
   for(var i in letters){
      var letter = letters[i];
      $("."+letter).click(function() {
         $("div[class^=work-]").hide();
         $("div[class^=work-"+letter+"-link1]").fadeIn();
      });
   }
   $('[class^=link]').click(function() {
      $('div[class^=work-]').hide();
      $(this).parent().fadeIn(); //This does the trick!!
      return false;
   });
});

希望这有帮助。干杯