Question

好吧，这可能是一个简单的解决方案，但我搜索了堆栈溢出和谷歌但仍然无法找到它。我有20-30组你可以搜索并点击的方框，但当你点击在他们身上，其他一切都将隐藏，然后我会有一个框出现一些信息，如果你点击该框或在下一个框将出现等等。当然，我不希望所有实例同时显示这些框，我只想要一次点击即可显示。

现在我只关注点击方框。编辑：我现在也做了和js小提琴：http://jsfiddle.net/tommhans/ymMW9/ 关键是我想要方框文本1，然后当我点击一个方框时出现text2,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>

Answer 1

根据您的描述，这可能是您想要的

$(document).ready(function(){
  $(".test").click(function(){
    $(this).toggle();
    $(".test").toggle();
        $("#info").toggle();
  });
});

Answer 2

编辑：OP编辑了他的问题，使得这个答案与他的问题不太相关。

我认为你是从错误的角度攻击这个，

绑定事件的方式可能是一个问题，我建议您为每个新的框创建一个对象，然后该对象可以包含所有不同文本项的数组，从那里开始＃39 ; ll只是听取数组项目的点击并显示数组中的下一个项目并隐藏当前项目。（添加逻辑检查以查看它是否是数组中的最后一项）。

还可以让您的代码更容易理解。

使多个实例仅显示单击的实例

2 个答案: