为“互动教程”打开多个方框

Question

在标题中很难解释这一点，但我想做的是制作“交互式”教程，用户点击他想要清理或清理的区域或产品，然后另一个框弹出信息，当这部分完成后，你继续使用另一个盒子等等......所以我最终得到了7-8个盒子，以及30个产品和30个（områder）区域我的编码方式它会非常混乱，因为我编码像“box1，box2”等，只是没有让它与css / javascript / jquery中的一个盒子引用一起工作，我不知道这是否可能，或者某种阵列可能有用吗？

我实际上在做的是创建一个包含每次点击信息的新框，从而删除其他“主标题”框。

你可以在这里查看： http://www.premiere-produkter.no/pp/metode/index.php

Javascript和HTML代码：

  

$(".text2,text3,text4,text5,text6,text7,text8,text9,text10,text11,text12").hide(500);
$(".text22,text23,text24,text25,text26,text27,text28,text29,text210,text211,text212").hide(500);


$(document).ready(function(){
   $('.box').click (function(){
    $(".text").toggle(500);
	$(".text").animate({margin: "0px 4px"}, 500);
	//$( "div:not(:contains('box'))" ).toggle(500);
	$(".box1,.box2").hide(500);
  });
 
   $("#neste1").click (function()
	 {
	$(".text2").animate({margin: "0px 4px"}, 500);
	$(".text2").show(500);
	
	 });
	 
	 $("#neste2").click (function()
	 	{ 
		 
		 $(".text3").show(500);
		 $(".text3").animate({margin: "0px 4px"}, 500);
		 
		 });
	 
	 $("#neste3").click (function()
	 		{ 
	 		$(".text4").show(500);
		 	$(".text4").animate({margin: "0px 4px"}, 500);
			
			});
	$("#neste4").click (function()
	 			{ 
	 			$(".text5").show(500);
		 		$(".text5").animate({margin: "0px 4px"}, 500);
				
				});
				
		$("#neste5").click (function()
	 			{ 
	 			$(".text6").show(500);
		 		$(".text6").animate({margin: "0px 4px"}, 500);
				
				});
					
							$("#neste6").click (function()
	 			{ 
	 			$(".text7").show(500);
		 		$(".text7").animate({margin: "0px 4px"}, 500);
				
				});
				
				
						$("#neste7").click (function()
	 			{ 
	 			$(".text8").show(500);
		 		$(".text8").animate({margin: "0px 4px"}, 500);
				
				});		
				
				   $('.box2').click (function(){
    $(".text22").toggle(500);
	$(".text22").animate({margin: "0px 4px"}, 500);
	//$( "div:not(:contains('box'))" ).toggle(500);
	$(".box,.box1").hide(500);
  });
				
				
				   $("#neste21").click (function()
	 {
	$(".text22").animate({margin: "0px 4px"}, 500);
	$(".text22").show(500);
	
	 });
	 
	 $("#neste22").click (function()
	 	{ 
		 
		 $(".text23").show(500);
		 $(".text23").animate({margin: "0px 4px"}, 500);
		 
		 });
	 
	 $("#neste23").click (function()
	 		{ 
	 		$(".text24").show(500);
		 	$(".text24").animate({margin: "0px 4px"}, 500);
			
			});
	$("#neste24").click (function()
	 			{ 
	 			$(".text25").show(500);
		 		$(".text25").animate({margin: "0px 4px"}, 500);
				
				});
				
		$("#neste25").click (function()
	 			{ 
	 			$(".text26").show(500);
		 		$(".text26").animate({margin: "0px 4px"}, 500);
				
				});
					
							$("#neste26").click (function()
	 			{ 
	 			$(".text27").show(500);
		 		$(".text27").animate({margin: "0px 4px"}, 500);
				
				});
				
				
						$("#neste27").click (function()
	 			{ 
	 			$(".text28").show(500);
		 		$(".text28").animate({margin: "0px 4px"}, 500);
				
				});		
				
				
				
							$(".arbflat").click (function()
	 			{ 
				
	 			$(".box2,.text11").show(500);
		 		$(".box,.text,.text2,.text3,.text4,.text5,.text6,.text7,.text8").hide(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 language="JavaScript" type="text/javascript">
function openPopUP() {
  window.open('http://www.premiere-produkter.no/datablad/11034.pdf','NewWin',
            'toolbar=no,status=no,width=600,height=800') }

function open11034() {
  window.open('http://www.premiere-produkter.no/main.aspx?page=article&artno=11034','NewWin',
            'toolbar=no,status=no,width=800,height=800') }

function opensolchart11034() {
  window.open('img/solutionchart11034.pdf','NewWin',
            'toolbar=no,status=no,width=800,height=800') }
			
function opengummihansker() {
  window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5065&gidlevel=0','NewWin',
            'toolbar=no,status=no,width=800,height=800') }

function opengummihansker() {
  window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5063&gidlevel=0','NewWin',
            'toolbar=no,status=no,width=800,height=800') }


function openPopUP2() {
  window.open('https://www.youtube.com/watch?v=Knf9YQeNVl4;autoplay=1','NewWin',
            'toolbar=no,status=no,width=550,height=550') }
			
function openflaske() {
  window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=b%C3%B8tte&searchfld=','NewWin',
            'toolbar=no,status=no,width=550,height=550') }

function openbøtte() {
  window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0','NewWin',
            'toolbar=no,status=no,width=550,height=550') }
						
	function opendoseringbøtte() {
  window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=b%C3%B8tte%20dispenser&searchfld=','NewWin',
            'toolbar=no,status=no,width=550,height=550') }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrap">
<h4><img src="img/PremiereProdukter_logoSMALL.png"></h4>
<h5>Interaktive rengjøringsprosedyrer</h5>
  <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="box" data-goto="default">
        
        <a href="#"><img src="img/11034.jpg"><h2>CaterClean</h2></a>
          </li>
        <div class="text">
        <h6> Produkt informasjon</h6>
       <p style="display:block; width:100%; background:#FFF; color:#000; font-weight:bold;"><b><a style="color:#000;" href="#" onclick="open11034();"> For mer informasjon om produktet trykk her</b></a></p>
             <p><button id="neste1">Fortsett</button></p>
         </div>  
            <div class="text2">
             <h6> Helse,miljø og sikkerhet:</h6>
             <p>Før vi går videre anbefaler vi deg å lese igjennom HMS datablad på dette produktet</p>
             <p>Punkt 4: Førstehjelpstiltak<br />
             Punkt 5: Brannsikrings tiltak<br />
             Punkt 7: Håndtering og lagring<br />
             Punkt 8: Personlig vernebeskyttelse</p>
             <p style="text-decoration:underline;"><a href="#" onclick="openPopUP();"> Last ned / se igjennom databladet her </a></p>    
             <p><button id="neste2">Fortsett</button></p>
             
            <!-- <p><button id="neste2">Desinfisering</button></p>  -->
             </div>
             
             <div class="text3">
            <h6>Arbeidstøy og verneutstyr:</h6>
             <p>Anbefalt verneutstyr ut i fra  HMS datablad:</p>
              <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5065&gidlevel=0">Gummihansker: </a><br />
            <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5063&gidlevel=0">Engangshansker:  </a><br />
            <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=vernebrille&searchfld=">Vernebriller:  </a> </p>
          <p><button id="neste3">Neste Boks</button></p> 
             
             </div>
             
             <div class="text4">
           <h6>Rengjøringsoppgave</h6>
             <p>Under velger du type renhold du skal utføre i henhold til området produktet skal brukes på.</p>
             Spray rengjøring: <b>1:50</b></a><br />
             Generell overflate rengjøring: <b>1:50</b></a><br />
             Frityr koker: <b>1:20</b></a><br />
             Mopping: <b>1:50</b></a><Br />
             Grovrengjøring: <b>1:10</b></a><BR />  
            
        <p><button id="neste4">Neste Boks</button></p> 
             
             </div> 
             
                  <div class="text5">
   			<h6>Flaske eller bøtte </h6>
                <p> Velg hvilken flaske/bøtte du skal blande renholdsproduktet i:</p>
                <p style="text-decoration:underline; cursor:pointer; text-align:left;"><a href="#" onclick="openflaske();">Flaske:</a><br />
             	<a onclick="openbøtte();" href="#"> Bøtte: </a><br />
            	<a onclick="opendoseringbøtte();" href="#"> Doseringspumper:  </a></p>
              
    <p><button id="neste5">Neste Boks</button></p> 
             
             </div> 
     
                     <div class="text6">
                    <h6>Dosering </h6>
                     <p>Hvordan dosere rett blandings forhold trykk på bilder under</p>
	      
              <p style="text-decoration:underline;"><a href="#" onclick="opensolchart11034();"> <img src="img/doschart.jpg"> </a></p>
         
   <p><button id="neste6">Neste Boks</button></p> 
             </div> 
     
      
      
                        <div class="text7">
   			<h6>Teknisk Informasjon</h6>
                <p> Her kan du laste ned teknisk informasjon om produktet:</p>
                <p>Caterclean 50: <a href="http://www.premiereproducts.co.uk/downloads/TIS/Caterclean%2050%20TIS.pdf" target="_blank"> Se her </a></p>
              
    <p><button id="neste7">Neste Boks</button></p> 
             
             </div> 
      
                       <div class="text8">
   			<h6>Områder </h6>
                <p> Her er ulike områder som kan passe med dette produktet:</p>
                <p>Arbeidsflater: <a href="#"> <div class="arbflat"> Trykk her</div> </a></p>
             	<p>Spisebord: <a href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
            	<p>Kjøkken: <a href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
              
    <p><button id="neste8">Neste Boks</button></p> 
             
             </div> 
  
	</ul>

    <!--OMRÅDER-->
    
     <ul id="list2">
     <h3>OMRÅDER</h3>
		<li class="box2">
        
        <a href="#/australia/"><img src="img/flater.jpg"><h2>Arbeidsflater</h2></a>
        
          
         </div>  
            <div class="text22">
             <h6> Metoder for å rengjøre:</h6>
             <p>1. </p>
             <p>Punkt 4: Førstehjelpstiltak<br />
             Punkt 5: Brannsikrings tiltak<br />
             Punkt 7: Håndtering og lagring<br />
             Punkt 8: Personlig vernebeskyttelse</p>
             <p style="text2-decoration:underline;"><a href="#" onclick="openPopUP();"> Last ned / se igjennom databladet her </a></p>    
             <p><button id="neste22">Fortsett</button></p>
             
            <!-- <p><button id="neste22">Desinfisering</button></p>  -->
             </div>
             
             <div class="text23">
            <h6>Arbeidstøy og verneutstyr:</h6>
             <p>Anbefalt verneutstyr ut i fra  HMS datablad:</p>
             Gummihansker: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5065&gidlevel=0"> Se her </a><br />
             Engangshansker: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5063&gidlevel=0"> Se her </a><br />
             Vernebriller: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=vernebrille&searchfld="> Se her </a> </p>
          <p><button id="neste23">Neste Boks</button></p> 
             
             </div>
             
             <div class="text24">
             <p><h6>Rengjøringsoppgave</h6></p>
             <p>Under velger du type renhold du skal utføre i henhold til området produktet skal brukes på.</p>
             Spray rengjøring: <b>1:50</b><br />
             Generell overflate rengjøring: <b>1:50</b><br />
             Frityr koker: <b>1:20</b><br />
             Mopping: <b>1:50</b><Br />
             Grovrengjøring: <b>1:10</b><BR />  
            
        <p><button id="neste24">Neste Boks</button></p> 
             
             </div> 
             
                  <div class="text25">
   			<p><h6>Flaske eller bøtte </h6></p>
                <p> Velg hvilken flaske/bøtte du skal blande renholdsproduktet i:</p>
                <p>Flaske: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=b%C3%B8tte&searchfld=" target="_blank"> Se her </a><br />
             	Bøtte: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a><br />
            	Doseringspumper: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
              
    <p><button id="neste25">Neste Boks</button></p> 
             
             </div> 
     
                     <div class="text26">
                     <p><h6>Dosering </h6></p>
                     <p>Hvordan dosere rett blandings forhold trykk på bilder under</p>
	      
              <p style="text2-decoration:underline;"><a href="#" onclick="opensolchart11034();"> <img src="img/doschart.jpg"> </a></p>
         
   <p><button id="neste26">Neste Boks</button></p> 
             </div> 
     
      
        
                        <div class="text27">
   			<p><h6>Teknisk Informasjon</h6></p>
                <p> Her kan du laste ned teknisk informasjon om produktet:</p>
                <p>Caterclean 50: <a style="text-align:right; text-decoration:underline;" href="http://www.premiereproducts.co.uk/downloads/TIS/Caterclean%2050%20TIS.pdf" target="_blank"> Se her </a></p>
              
    <p><button id="neste27">Neste Boks</button></p> 
             
             </div> 
      
                       <div class="text28">
   			<p><h6>Områder </h6></p>
                <p> Her er ulike områder som kan passe med dette produktet:</p>
                <p>Arbeidsflater: <a style="text-align:right; text-decoration:underline;" href="#"> <div class="arbflat"> Trykk her</div> </a></p>
             	<p>Spisebord: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
            	<p>Kjøkken: <a  href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
              
    <p><button id="neste28">Neste Boks</button></p> 
             
             </div> 
            </li>
	</ul>

    
</div>


</body>

希望你们明白我试图在这里实现的目标，我不太确定我是否能够解释得足够好但是现场网站应该能让你理解，如果没有。

Answer 1

您无需在此专门提及隐藏的所有课程。您可以使用所有元素共同的类.text-hidden，并在CSS中添加此代码

.text-hidden {
  display: none;
}

现在所有的框都被隐藏了，你可以拥有动画的功能，而不是每次重复动画代码，你传递需要动画的元素。我已经为每个名为data-next的按钮添加了一个数据属性，该按钮将在单击时显示框名称。

HTML

 <button id="neste2" data-next="text3">Fortsett</button>

JS

$('button').on('click', function(){
  var str = $(this).data('next');  // on click get the value from data-next of the clicked button
  animateBox($('.'+str))           // pass this value to the custom function
});

function animateBox(obj) {
   var $obj = obj;
   $obj.animate({
            margin: "0px 4px"
   }, 500);
   $obj.show(500);   
}

See Fiddle