Jquery tıklama ile class değişmesi
containerın içindeki i etiketine tıklayınca etiketin class ının fas fa-volume-mute olmasını yani ikonun değişmesini istiyorum ama neden olmadığını anlayamadım.
İki türlü denedim;
html kodlarım
<div id="music-container">
<i class="fas fa-volume-down"></i>
</div>
jquery kodlarım 1. deneyişim
$('#music-container i').click(function(){
$(this).removeClass('fas fa-volume-down')
$(this).addClass('fas fa-volume-mute')
});
2.deneyişim
$('#music-container i').click(function(){
$(this).attr('class', 'fas fa-volume-mute')
});
ben denedim oluyor. önce font-awesome'ı dahil ettiğinden emin ol.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
jquery'i dahil ettiğinden emin ol
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
ve kodlarını etiktenden sonra yazdığından emin ol.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div id="music-container">
<i class="fas fa-volume-down"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#music-container i').on('click', function() {
$(this).removeClass('fa-volume-down').addClass('fa-volume-mute');
});
</script>