根据按钮选择更改div中的内容

因此，我创建了几个h2标签，并将它们放置在一个列表中，它们都是可点击的，点击时它们会显示div中的内容。这很棒，但我希望以前的内容消失，并由新内容取代。根据按钮选择更改div中的内容

下面是按钮的样子;

<div id="h2List">  
     <h2 id="reveal1">Who are the main characters?</h2> 

     <h2 id="reveal2">The action takes place on</h2> 

     <h2 id="reveal3">Space crafts include</h2> 

     <h2 id="reveal4">What are those things??</h2> 

     <h2 id="reveal5">When they're not flying their driving</h2> 
    </div>

这是持有内容的div;

<div id="h2Reveal"> 
       <ul class="hidden" id="listOfCharacters"> 
       </ul> 
       <ul class="hidden" id="listOfPlanets"> 
       </ul> 
       <ul class="hidden" id="spaceStuff"> 
       </ul> 
       <ul class="hidden" id="things"> 
       </ul> 
       <ul class="hidden" id="drive"> 
       </ul> 
      </div>

最后，这是我用来切换第二个div中的信息列表的jQuery;

$("#reveal1").on("click", function() { 
      $("#listOfCharacters").toggle(); 
     } 
    ); 

    $("#reveal2").on("click", function() { 
      $("#listOfPlanets").toggle(); 
     } 
    ); 
    $("#reveal3").on("click", function() { 
      $("#spaceStuff").toggle(); 
     } 
    ); 
    $("#reveal4").on("click", function() { 
      $("#things").toggle(); 
     } 
    ); 
    $("#reveal5").on("click", function() { 
      $("#drive").toggle(); 
     } 
    );

我希望这是有道理的。

来源

2017-03-12 Ben Grzybowski

您可能需要使用toggleClass

$("#reveal1").on("click", function() { 
      $("#listOfCharacters").toggleClass('hidden'); 
     } 
    ); 

    $("#reveal2").on("click", function() { 
      $("#listOfPlanets").toggleClass('hidden'); 
     } 
    ); 
    $("#reveal3").on("click", function() { 
      $("#spaceStuff").toggleClass('hidden'); 
     } 
    ); 
    $("#reveal4").on("click", function() { 
      $("#things").toggleClass('hidden'); 
     } 
    ); 
    $("#reveal5").on("click", function() { 
      $("#drive").toggleClass('hidden'); 
     } 
    );

来源

2017-03-12 03:19:40 CaptainHere

这样做的工作，但它似乎就像我的代码一样。当点击时显示与h2标签相关联的列表，并且当第二次点击时也隐藏关联列表。我试图做的就像当揭示1被点击时显示与它相关的列表。然后说人点击揭示5，我想隐藏先前显示的列表，并将其替换为与揭示5相关联的那个。我实现了两个建议的代码块，它们都工作，但它们与我原来所做的一样编码。 –

我同意使用toggleClass，但你可以将其拧紧了一下，从源ID到目标中引入映射提高可维护性。

var mapping = { 
    "reveal1": "#listOfCharacters", 
    "reveal2": "#listOfPlanets", 
    "reveal3": "#spaceStuff", 
    "reveal4": "#things", 
    "reveal5": "#drive" 
}; 

$("h2").on("click", function(event) { 
    $(mapping[event.target.id]).toggleClass('hidden'); 
});

来源

2017-03-12 04:37:43

根据按钮选择更改div中的内容

回答

相关问题