当另一个 div 被按钮激活时使 div 可见

Question

I'm trying to make 1 button show two divs when I click it using jquery.

So on click of button #show1 I want div #cybernetics + div.gif1 to appear and on click on button #show2 I want div #eat + div.gif2 to appear

Is it possible? thank you! currently I have the following code

 $('document').ready(function() { $('#show1, #show2, #show3').click( function() { var $div = $('#' + $(this).data('href')); $('.demo').not($div).hide(); $div.fadeToggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="show1" data-href="cybernetics"><h2> ></h2></button> <button id="show2" data-href="eat"><h2> ></h2></button> <div id="cybernetics" class="demo"> <header> <h1>CYBERNETICS</h1> </header> </div> <div class="gif1"> <img src="cybernetics.gif"> </div> <div id="eat" class="demo"> <header> <h1>EAT</h1> </header> </div> <div class="gif2"> <img src="eat.gif"> </div>

Answer 1

Simply you can show hide as per button click as bewlo.

 $('.gif1, .gif2, #cybernetics, #eat').hide(); $('document').ready(function() { $('#show1').click( function() { $('.gif1, .gif2, #cybernetics, #eat').hide(); $('#cybernetics').show(); $('.gif1').show(); }); $('#show2').click( function() { $('.gif1, .gif2, #cybernetics, #eat').hide(); $('#eat').show(); $('.gif2').show(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="show1" data-href="cybernetics"><h2> ></h2></button> <button id="show2" data-href="eat"><h2> ></h2></button> <div id="cybernetics" class="demo"> <header> <h1>CYBERNETICS</h1> </header> </div> <div class="gif1"> <img src="cybernetics.gif"> </div> <div id="eat" class="demo"> <header> <h1>EAT</h1> </header> </div> <div class="gif2"> <img src="eat.gif"> </div>

Answer 2

I assume from the logic you're trying to keep this DRY, so you don't want multiple event handlers. As such you can select the target element based on the data-href attribute of the clicked button, then get the next() element from that and fade them both in, something like this:

 $('document').ready(function() { $('.toggle').click(function() { var $div = $('#' + $(this).data('href')); $('.demo').not($div).hide().next().hide(); $div.add($div.next()).fadeToggle(); }); });

 .demo, .demo + div { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="show1" class="toggle" data-href="cybernetics"><h2> ></h2></button> <button id="show2" class="toggle" data-href="eat"><h2> ></h2></button> <div id="cybernetics" class="demo"> <header> <h1>CYBERNETICS</h1> </header> </div> <div class="gif1"> <img src="cybernetics.gif"> </div> <div id="eat" class="demo"> <header> <h1>EAT</h1> </header> </div> <div class="gif2"> <img src="eat.gif"> </div>

Answer 3

You can make change to below code

<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>

<div class="allBox cybernetics" style="display: none;">
  <header>
    <h1>CYBERNETICS</h1>
  </header>
</div>

<div class="allBox cybernetics" style="display: none;">
  <img src="cybernetics.gif">
</div>

<div class="allBox eat" style="display: none;">
  <header>
    <h1>E.A.T.</h1>
  </header>
</div>

<div class="allBox eat" style="display: none;">
  <img src="eat.gif">
</div>

and your js code goes here

<script type="text/javascript">
$("#show1").on('click', function(){
    hrefVal = $(this).attr('data-href');
    $(".allBox").css('display', 'none');
    $("."+hrefVal).css('display', 'block');
})
$("#show2").on('click', function(){
    hrefVal = $(this).attr('data-href');
    $(".allBox").css('display', 'none');
    $("."+hrefVal).css('display', 'block');
})
</script>

Answer 4

This is a solution maintaining your data structure and name convention. I also fix a bug when clicking multiple times on the same button would fade in and out the right items.

 $('document').ready(function() { $('#show1, #show2, #show3').click( function() { var target = $(this).data('href'); var $div = $('#' + target); $('.demo').not($div).hide(); $(".gif img:not([src^='"+target+"'])").hide(); $(".gif img[src^='"+target+"']").show(); $div.fadeIn(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="show1" data-href="cybernetics"><h2> ></h2></button> <button id="show2" data-href="eat"><h2> ></h2></button> <div id="cybernetics" class="demo"> <header> <h1>CYBERNETICS</h1> </header> </div> <div class="gif"> <img src="cybernetics.gif"> </div> <div id="eat" class="demo"> <header> <h1>EAT</h1> </header> </div> <div class="gif"> <img src="eat.gif"> </div>