[Javascript] كيف يمكنني إضافة أو إزالة الفئات المرتبطة بعنصر باستخدام مسج؟


Answers

استخدم toggleClass() لإضافة فئة إذا لم تكن موجودة بالفعل، أو إزالتها إذا كانت موجودة. لأن المنطق هو نفسه، يمكنك فقط تمرير وظيفة واحدة hover .

$(document).ready(function(){
    var sub = $('.sub');
    sub.parent().hover(function(){ 
        sub.toggleClass('sub-inactive sub-active'); 
    });
 });

مستندات هنا .

امل ان يساعد! في صحتك.

Question

أحاول إضافة الطبقات وإزالتها ديناميكيا باستخدام جكري في صفحة الويب الخاصة بي. هنا؛ ق رمز -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
    .sub-inactive{display:none;}
    .sub-active{display:!important;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('.sub').parent().hover(
        function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
        function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },
        );
    });
</script>
</head>
<body>
    <div id="container">
        <ul class="main">
            <li>link1</li>
            <li>link2</li>
            <li>link3
                <ul class="sub sub-inactive">
                    <li>link 3a</li>
                    <li>link 3a</li>
                    <li>link 3a</li>
                    <li>link 3a</li>
                </ul>
            </li>
            <li>link4</li>
            <li>link5</li>
        </ul>
    </div>
</body>
</html>

في الأساس، هناك فئات متعددة تعلق على عنصر (نشط، شبه نشط في هذه الحالة). وبناء على بعض الأحداث التي تحدث في الصفحة، أريد أن تغيير حيوي حالة الطبقة من العنصر. على سبيل المثال، بالنسبة لعنصر، الفئة الموجودة حاليا هي كلاس = "سوب-أكتيف أكتيف"، أريد تغييره باستخدام جكري إلى كلاس = "سوب سوب-إناكتيف" ....

واسمحوا لي أن أعرف كيفية إضافة / إزالة فئات معينة من عنصر. لا يبدو أن سطرين من التعليمات البرمجية الواردة أدناه (من المثال أعلاه) تعمل -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
        function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }

شكر!




أعتقد أساسا أن ما تبحث عنه هو شيء من هذا القبيل ...

<script type="text/javascript">
$(document).ready(function(){
    $('.sub').parent().hover(function(){ 
        $(this).find('ul.sub').removeClass('sub-inactive').addClass('sub-active');
    });
    $('.sub').parent().mouseout(function(){
        $(this).find('ul.sub').removeClass('sub-active').addClass('sub-inactive');
    });
});

كما يمكنك التحقق من كس. أنا لا أعتقد أن إعداد عرض:! سوف تفعل أي شيء في الواقع. في الواقع، باستخدام المثال أعلاه، يجب أن لا تحتاج حتى الطبقة الفرعية النشطة ، لأن الطبقة الفرعية غير النشطة يتم تجريده من العنصر، وبالتالي إلغاء "ديسبلاي: نون؛" بيان.