Получение нескольких экземпляров, чтобы показать только выбранный экземпляр

Хорошо, это может быть простое решение, но я искал переполнение стека и Google, но все еще не смог это выяснить. У меня есть 20-30 наборы ящиков, которые вы можете искать и нажимать на них, но когда вы нажимаете на них, все остальное будет скрываться, и тогда у меня появится окно с некоторой информацией, если вы щелкните на этом поле или на следующем появится другое поле и так далее. И, конечно же, я не хочу, чтобы все экземпляры отображали поля одновременно, я просто хочу, чтобы показывался один раз, когда я щелкнул.

Прямо сейчас я просто сосредотачиваюсь на щелчке коробок. Редактировать: я также сделал и JS Fiddle: http://jsfiddle.net/tommhans/ymMW9/ Дело в том, что я хочу, чтобы текст ящиков 1, а затем текст 2, 4 появлялся, когда я щелкаю окно.

    <script>
    $(document).ready(function(){  
        $('.testimonial').click (function(){
        $(this).children().toggle(500);

      });

        $("#produkter").click(function(){
        $("#list").show(500);
        $("#list2").hide(500);
      });

          $("#omrader").click(function(){
        $("#list2").show(500);
        $("#list").hide(500);
      });

       $("#begge").click(function(){
        $("#list2").show(500);
        $("#list").show(500);
      });

    });



    </script>
    </head>
    <body>
    <div id="wrap">

      <h1 id="header"><!--searchbar--></h1>

    <div id="buttons">
      <h3 id="produkter">Produkter</h3>
      <h3 id="omrader">Områder</h3>
      <h3 id="begge">Begge</h3>
    </div>  
        <!--Produkter -->
      <ul id="list">
      <h3>PRODUKTER</h3>
            <li class="testimonial">

            <a href="#/australia/"><img src="img/11034.jpg"><h2>CaterClean</h2></a>

            <div class="text">
            <p>Varenr: 11034 </p>
                <p>Bruksområder: Arbeidsområder, Åpne Flater, Kjøkkenbenk, Kjøkkenutstyr, Grill og ovner, Gulv.</p>
                 <p>Info: Brukes til deinfisering, la den virke i 5-10 minutter og den dreper omtrent alle bakteriene som er der. Kan brukes på de fleste områder. Er enten i 5lt kanne eller i 0,75lt spray.</p>
                   <div class="text2">TEST</div>
                    <div class="text3">TEST2</div>
                    <div class="text4">TEST3</div>   
             </div>  



                </li>


            <li class="testimonial">

            <a href="#/australia/"><img src="img/11001.jpg"><h2>Savona d2</h2></a>
                   <div class="text">
            <p>Varenr: 11001</p>
                <p>Bruksområder: Arbeidsområder, Åpne Flater, Kjøkkenbenk, Kjøkkenutstyr, Grill og ovner, Gulv.</p>
                 <p>Info: Brukes til deinfisering, la den virke i 5-10 minutter og den dreper omtrent alle bakteriene som er der. Kan brukes på de fleste områder. Er enten i 5lt kanne eller i 0,75lt spray.</p>
             </div>

                   <div class="text2">TEST</div>
                    <div class="text3">TEST2</div>
                    <div class="text4">TEST3</div>   
            </li>
Источник

2 ответа

Из вашего описания, это может быть то, что вы хотите

$(document).ready(function(){
  $(".test").click(function(){
    $(this).toggle();
    $(".test").toggle();
        $("#info").toggle();
  });
});
Источник

Редактировать: ОП отредактировал свой вопрос, сделав этот ответ менее соответствующим его вопросу.

Я думаю, что вы атакуете это с неправильной точки зрения,

То, как вы связываете события, может быть проблемой, я предлагаю вам создать объект для каждого нового "ящика", тогда объект может иметь массив всех различных текстовых элементов, оттуда вы будете просто слушать клики на элементе массива. и показать следующий элемент в массиве и скрыть текущий. (добавьте проверку логики, чтобы увидеть, является ли это последним элементом в массиве).

Сделает ваш код проще для понимания.

Источник
Другие вопросы по тегам