كيف يمكنك تبديل DIVs عند تمرير الماوس (jQuery)؟

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

  •  09-06-2019
  •  | 
  •  

سؤال

قد يكون هذا ثاني أبسط تأثير للتمرير، وما زلت لا أجد أي حل بسيط.

مطلوب: لدي قائمة بالعناصر وقائمة الشرائح (DIVs) المقابلة لها.بعد التحميل، يجب تحديد عنصر القائمة الأول (غامق) ويجب أن تكون الشريحة الأولى مرئية.عندما يقوم المستخدم بالتمرير فوق عنصر قائمة آخر، يجب تحديد عنصر القائمة هذا بدلاً من ذلك ويتم عرض الشريحة المقابلة.

الكود التالي يعمل، ولكن أمر فظيع.كيف يمكنني الحصول على هذا السلوك بطريقة أنيقة؟يحتوي jquery على العشرات من تأثيرات التمرير المتحركة والمعقدة، لكنني لم أتوصل إلى طريقة نظيفة لهذا التأثير.

<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>
هل كانت مفيدة؟

المحلول

بدلاً من عرض جميع الشرائح عند إيقاف تشغيل JS (وهو ما قد يؤدي على الأرجح إلى كسر تخطيط الصفحة) أود أن أضع داخل المحول روابط LI حقيقية A إلى التعليمات البرمجية من جانب الخادم والتي تُرجع الصفحة مع الفئة "النشيطة" المحددة مسبقًا على المحول المناسب /الانزلاق.

$(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>

نصائح أخرى

إليك إصدار jQuery ذو العلامات الضوئية:

<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>

يتمتع هذا بميزة عرض جميع الشرائح إذا قام المستخدم بإيقاف تشغيل جافا سكريبت، ويستخدم القليل جدًا من علامات HTML ويكون جافا سكريبت قابلاً للقراءة إلى حد كبير.ال switchTo تأخذ الدالة رقم فهرس منها <li> / <div> الاقتران للتنشيط، وإعادة تعيين كافة العناصر ذات الصلة إلى أنماطها الافتراضية (غير غامق لعناصر القائمة، display:none لـ DIVs) والمجموعات المطلوبة list-item و div ل bold و display.طالما تم تمكين جافا سكريبت لدى العميل، ستكون الوظيفة هي نفسها تمامًا مثل المثال الأصلي.

إليك إصدار jQuery:

<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>

الشيء الوحيد الخطأ في هذا الرمز (على الأقل بالنسبة لي) هو أنك لا تستخدم حلقة لمعالجة جميع العناصر.بخلاف ذلك، لماذا لا يكون الأمر هكذا؟

ومع الحلقة، أعني الاستيلاء على عنصر الحاوية عبر JQuery والتكرار على جميع العناصر الفرعية - بشكل أساسي سطر واحد.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top