Hoe kan jy ruil divs op mouse over (jQuery)?

StackOverflow https://stackoverflow.com/questions/34536

  •  09-06-2019
  •  | 
  •  

Vra

Dit die meeste van die tweede mees eenvoudige roll effek wees, nog nie enige eenvoudige oplossing te vind.

Gesoek: Ek het 'n lys van items en 'n ooreenstemmende lys van skyfies (divs). Na die laai, moet die eerste lys item gekies (vet) en die eerste skyfie moet sigbaar wees. Wanneer die gebruiker hang oor 'n ander lys item, moet die lys item in plaas gekies en die ooreenstemmende skyfie vertoon.

Die volgende kode werk, maar is verskriklik . Hoe kan ek hierdie gedrag in 'n elegante manier te kry? jQuery het dekades van geanimeerde en ingewikkeld roll-effekte, maar ek het nie kom met 'n skoon manier vir hierdie effek. 

<script type="text/javascript">
function switchTo(id) {
    document.getElementById('slide1').style.display=(id==1)?'block':'none';
    document.getElementById('slide2').style.display=(id==2)?'block':'none';
    document.getElementById('slide3').style.display=(id==3)?'block':'none';
    document.getElementById('slide4').style.display=(id==4)?'block':'none';
    document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
    document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
    document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
    document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>

<ul id="switches">
  <li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
  <li id="switch2" onmouseover="switchTo(2);">Second slide</li>
  <li id="switch3" onmouseover="switchTo(3);">Third slide</li>
  <li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
Was dit nuttig?

Oplossing

In plaas daarvan vertoon alle skyfies toe JS is af (wat waarskynlik sou breek die bladuitleg) Ek sou binne die skakelaar Lis plaas real A skakels na bediener-kant-kode wat die bladsy terug met die "aktiewe" klas pre-set op die behoorlike skakelaar / skyfie. 

$(document).ready(function() {
  switches = $('#switches > li');
  slides = $('#slides > div');
  switches.each(function(idx) {
    $(this).data('slide', slides.eq(idx));
  }).hover(
    function() {
      switches.removeClass('active');
      slides.removeClass('active');
      $(this).addClass('active');
      $(this).data('slide').addClass('active');
    });
});
#switches .active {
  font-weight: bold;
}
#slides div {
  display: none;
}
#slides div.active {
  display: block;
}
<html>

<head>

  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="switch.js"></script>

</head>

<body>

  <ul id="switches">
    <li class="active">First slide</li>
    <li>Second slide</li>
    <li>Third slide</li>
    <li>Fourth slide</li>
  </ul>
  <div id="slides">
    <div class="active">Well well.</div>
    <div>Oh no!</div>
    <div>You again?</div>
    <div>I'm gone!</div>
  </div>

</body>

</html>

Ander wenke

Hier is my lig-opmaak jQuery weergawe: 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
  $('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
  $('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
  $('#switches li').mouseover(function(event){
    switchTo($('#switches li').index(event.target));
  });
  switchTo(0);
});
</script>
<ul id="switches">
  <li>First slide</li>
  <li>Second slide</li>
  <li>Third slide</li>
  <li>Fourth slide</li>
</ul>
<div id="slides">
  <div>Well well.</div>
  <div>Oh no!</div>
  <div>You again?</div>
  <div>I'm gone!</div>
</div>

Dit het die voordeel van wat al die skyfies as die gebruiker het JavaScript afgeskakel, gebruik baie min HTML opmaak en die javascript is redelik leesbare. Die switchTo funksie neem 'n indeks aantal wat <li> / <div> paar te aktiveer, bring jy al die relevante elemente na hulle verstek style (nie-vet vir lys items, display:none vir die divs) en die stelle die gewenste list-item en div om bold en display . Solank as wat die kliënt JavaScript in staat gestel het, sal die funksie presies dieselfde as jou oorspronklike voorbeeld wees.

Hier is die jQuery weergawe: 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#switches li").mouseover(function () {
        var $this = $(this);
        $("#slides div").hide();
        $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        $("#switches li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});
</script>

<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(
  function(){
    $( '#switches li' ).mouseover(
      function(){
        $( "#slides div" ).hide();
        $( '#switches li' ).css( 'font-weight', 'normal' );
        $( this ).css( 'font-weight', 'bold' );
        $( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
      }
    );
  }
);

</script>
</head>
<body>
<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>

Die enigste ding wat is verkeerd met hierdie kode (ten minste vir my) is dat jy nie met behulp van 'n lus om al die elemente te verwerk. Anders as dit, hoekom nie om dit so?

En met lus, ek bedoel gryp die houer element via 'n jQuery en iterating oor die hele kind elemente -. Basies 'n one-liner

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top