JQuery - Сменить CSS элемента при скрытии/видимости

Question

У меня есть переключатель div, когда нажата кнопка привязки. Я пытаюсь изменить значок через класс, когда div видимый, и когда он скрыт, но код не работает.

Кто-нибудь знает, как это сделать?

// Toggle design/code 
$(".design-n-code").click(function(e) { 
    code.toggle(); 
}); code.hide(); 

// Handles the icon so users know it's active when code is visible. 
if (code.is(':visible')) { 
    $(this).addClass('code-active'); 
} else { 
    $(this).removeClass('code-active'); 
} 

Answer 1

Испытание на видимость кода должно быть в обработчике. В обработчике this ссылается на элемент с щелчком, поэтому вместо этого вы должны позвонить addClass/removeClass элементу #icon-id (приспособить #icon-id к вашему собственному id).

// Toggle design/code 
$(".design-n-code").click(function(e) { 
    code.toggle(); 

    // Handles the icon so users know it's active when code is visible. 
    if (code.is(':visible')) { 
     $('#icon-id').addClass('code-active'); 
    } else { 
     $('#icon-id').removeClass('code-active'); 
    } 
}); 
code.hide(); 

Answer 2

Вы должны поставить логику для проверки visiblity в click обработчика. В противном случае он будет выполняться только один раз, и это будет в общем начале выполнения скрипта.

// Toggle design/code 
$(".design-n-code").click(function() { 
    code.toggle(); 

    // Handles the icon so users know it's active when code is visible. 
    if (code.is(':visible')) { 
     $(this).addClass('code-active'); 
    } else { 
     $(this).removeClass('code-active'); 
    } 
}); 
code.hide(); 

Answer 3

Вы говорите, что у вас есть якорь, который при щелчке переключает другой элемент, div. Использование «this» при нажатии не изменит класс другого элемента.

Вы хотели бы что-то вроде этого:

HTML

<a href="#" id="toggler">CLick me to toggle the other div</a> 
<div id="toBeToggled" class="IsShown">I have class abc</div> 

JS

$('#toggler').click(function() { 
     var target = $('#toBeToggled'); 
     if (target.is(":visible")) { 
      target.addClass('IsHidden').removeClass('IsShown'); 
      target.hide(); 
      // Demo purposes 
      console.log(target.attr('class')); 
     } else { 
      target.addClass('IsShown').removeClass('IsHidden'); 
      target.show(); 
      // Demo purposes 
      console.log(target.attr('class')); 
     } 
    }); 

JS FIDDLE EXAMPLE