Почему removeClass не работает?

Я предполагаю, что это действительно просто, но это сводило меня с ума! вот мой JQuery код ниже, и вот мой Fiddle Почему removeClass не работает?

$("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected'); 
      $('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover').siblings().removeClass('SiteIconHover'); 

      $("#HeaderSites").on('click', function() { 

      $(this).addClass('menuSelected').siblings().removeClass('menuSelected'); 
      $(this).children('#Site-icon-2').addClass('SiteIconHover2').siblings().removeClass('SiteIconHover2'); 

     }); 


$("#HeaderApps").on('click', function() { 

      $(this).addClass('menuSelected').siblings().removeClass('menuSelected'); 
      $(this).children('#Site-icon-3').addClass('SiteIconHover3').siblings().removeClass('SiteIconHover3'); 

     });

источник

2015-05-18 Zi_31

Возможный дубликат [Как отлаживать код JavaScript?] (Http://stackoverflow.com/questions/988363/how-can-i-debug-my -javascript-code) – Liam

Вы пробовали отлаживать его с помощью инструментов разработчика? Там должен быть отсутствующий элемент, поэтому вы не можете добавлять или удалять класс из '' 'undefined''' –

Это потому, что вы пытаетесь удалить класс из невесты, которые не существуют. – thewatcheruatu

Проблема заключается в том, что вы пытаетесь найти братьев и сестер без каких-либо братьев и сестер. Я изменил некоторые из CSS и JS. Это должно делать то, что вы хотите.

JS:

$("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected'); 
$('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover'); 

$("#Headerhome").on('click', function() { 

    $(this).addClass('menuSelected').siblings().removeClass('menuSelected'); 
    $('div').removeClass('SiteIconHover'); 
    $(this).children('#Site-icon-1').addClass('SiteIconHover'); 
}); 

$("#HeaderSites").on('click', function() { 

    $(this).addClass('menuSelected').siblings().removeClass('menuSelected'); 
    $('div').removeClass('SiteIconHover'); 
    $(this).children('#Site-icon-2').addClass('SiteIconHover'); 
}); 


$("#HeaderApps").on('click', function() { 

    $(this).addClass('menuSelected').siblings().removeClass('menuSelected'); 
    $('div').removeClass('SiteIconHover'); 
    $(this).children('#Site-icon-3').addClass('SiteIconHover'); 
});

CSS: Обновлено

#Site-icon-1 { 

    background-color:#000; 
    width:25px; 
    height:25px; 
    float:left; 
    margin-right:15px; 
    margin-top:12px; 
    margin-left:5px; 
} 

#Site-icon-1.SiteIconHover { 
    background-color:#00a9ff; 
    width: 25px; 
    height: 25px; 
    float: left; 
    margin-right: 15px; 
    margin-top: 12px; 
    margin-left: 5px;} 


#Site-icon-2 { 
    background-color:#000; 
    width: 25px; 
    height: 25px; 
    float: left; 
    margin-right: 15px; 
    margin-top: 12px; 
    margin-left: 5px; 
} 

#Site-icon-2.SiteIconHover { 
    background-color:green; 
    width: 25px; 
    height: 25px; 
    float: left; 
    margin-right: 15px; 
    margin-top: 12px; 
    margin-left: 5px;} 


#Site-icon-3 { 
    background-color:#000; 
    width: 25px; 
    height: 25px; 
    float: left; 
    margin-right: 15px; 
    margin-top: 12px; 
    margin-left: 5px; 
} 

#Site-icon-3.SiteIconHover { 
    background-color:red; 
    width: 25px; 
    height: 25px; 
    float: left; 
    margin-right: 15px; 
    margin-top: 12px; 
    margin-left: 5px;} 


#Headerhome, #HeaderSites, #HeaderApps { 

background: #254661; 
font-weight: normal; 
color: #eeeeee; 
box-sizing: border-box; 
outline: 0; 
line-height:50px; 
text-decoration: none; 
font-size: 100%; 
list-style: none; 
width:240px; 
height:50px; 
display: block; 
cursor: pointer; 
margin-top: 2px; 
margin-left:-20px; 
margin-right:0px; 
padding-left:20px; 
font-family:'Segoe UI'; 

} 

#HeaderSites.menuSelected { 
    border-left: 3px solid #26b3f7; 
background: #18374f; 
} 

#Headerhome.menuSelected { 
    border-left: 3px solid #26b3f7; 
background: #18374f; 
} 

#HeaderApps.menuSelected { 
    border-left: 3px solid #26b3f7; 
background: #18374f; 
}

DEMO:JSFiddleОбновлено

источник

2015-05-18 16:19:04

Значки должны быть индивидуальными не все одинаковыми. –

Вы имеете в виду, что они должны быть отдельными классами? –

Теперь у трех есть отдельные правила CSS –

-1

Попробуйте это варианты родственную, все они в той или иной форме работы, может быть, они могут соответствовать тому, что вы ищете

$("#item").removeClass(); 
$("#item").removeAttr('class'); 
$("#item").attr('class', '');

источник

2015-05-18 16:07:34 Romero

Я улучшил свой код. Вы можете написать меньше кода.

Посмотрите ниже:

JS:

$(document).ready(function(){ 
    $('.item').on('click', function(){ 
     $('.item').removeClass('menuSelected'); 
     $('.item').children('div').removeClass('SiteIconHover'); 

     $(this).addClass('menuSelected'); 
     $(this).children('div').addClass('SiteIconHover'); 
    }); 
});

Также я обновил свой код, так что вы можете посмотреть изменения в стиле, потому что вы можете иметь LEES css код.

https://jsfiddle.net/gon250/xwg0Lv9d/6/

Я надеюсь, что это помогает.

источник

2015-05-18 16:27:09 gon250

Значки должны быть индивидуальными не все одинаковыми. –

@ Ziggy31 Это не эффективный код repit .. так что если вы хотите использовать тот же стиль для нескольких div, вы должны использовать '' class''. Также в javascript вам нужно использовать классы, чтобы вы могли написать код лиза, и это будет намного лучше. – gon250

значки будут разными - например, я использовал цвет фона. Но они будут разными фоновыми изображениями –

У вас есть много и много проблем с вашим кодом, Вам необходимо улучшить CSS, а также, посмотрите на скрипке, я пытался улучшить свой код, надеюсь, что это помогает

JS Fiddle

I изменил свои JS следующих

function selectMenu(toSelect) { 
    toSelect.addClass('menuSelected').siblings().removeClass('menuSelected'); 
    toSelect.children().addClass('SiteIconHover'); 
    toSelect.siblings().children().removeClass('SiteIconHover'); 
} 

selectMenu($("#Headerhome")); 

$("#SideNav").on('click', function(event) { 
    if(event.target.id !== 'SideNav') 
     selectMenu($(event.target)); 
    event.stopPropagation(); 
});

источник

2015-05-18 16:34:06

Я обновил код ниже:

$("#Headerhome").addClass('menuSelected'); 

$("#Headerhome").on('click', function() { 
    var thisSelected = $(this).hasClass('menuSelected'); 
    if(!thisSelected) { 
     $('#HeaderSites, #HeaderApps, #Site-icon-1, #Site-icon-3').removeAttr('class'); 
     $(this).addClass('menuSelected'); 
     $('#Site-icon-1').addCass('SiteIconHover2'); 
    } else { 
     $(this).removeAttr('class'); 
    } 
}); 

$("#HeaderSites").on('click', function() { 
    var thisSelected = $(this).hasClass('menuSelected'); 
    if(!thisSelected) { 
     $('#Headerhome, #HeaderApps, #Site-icon-1, #Site-icon-3').removeAttr('class'); 
     $(this).addClass('menuSelected'); 
     $('#Site-icon-2').addCass('SiteIconHover2'); 
    } else { 
     $(this).removeAttr('class'); 
    } 
}); 

$("#HeaderApps").on('click', function() { 
    var thisSelected = $(this).hasClass('menuSelected'); 
    if(!thisSelected) { 
     $('#Headerhome, #HeaderSites, #Site-icon-1, #Site-icon-2').removeAttr('class'); 
     $(this).addClass('menuSelected'); 
     $('#Site-icon-3').addCass('SiteIconHover3'); 
    } else { 
     $(this).removeAttr('class'); 
    } 
});

Вы также можете проверить ссылку на Fiddle здесь: https://jsfiddle.net/xwg0Lv9d/7/

источник

2015-05-18 16:37:43 KoemsieLy

это не работает? –

Почему removeClass не работает?

ответ

Смежные вопросы