JQuery показать скрыть несколько DIV из меню и меню в DIV

Question

Я новичок в JQuery.Я пытаюсь показать и скрыть несколько делений.У меня есть меню, показывающее 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, которые

<div class="work-A-link1">

Вы можете изменить их на?

<div class="work A link1">

если это так, похоже, это работает .. добавит скрипку чуть позже добавила скрипку

$('.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;
   });
});

Надеюсь, это поможет. Приветствия