Изменить fontawesome icon on click

У меня есть список песен, в которых есть кнопка воспроизведения (fontawesome). Я хочу щелкнуть один из них и изменить значок с кнопки воспроизведения на кнопку паузы. Если я нажму кнопку воспроизведения другой песни, другие значки должны вернуться к кнопкам воспроизведения. Значок не меняется, когда я нажимаю его, хотя он играет мою песню. СпасибоИзменить fontawesome icon on click

Вот мой взгляд и петля foreach. Th Кнопка eplay является один, начиная с <td><a href=

@foreach (var song in popularsongs.OrderByDescending(song => song.Fightsong.PlayCount).Take(5)) 
{ 
    <tr> 
     <td onclick="location.href = '@Url.Action("Details", "Team", new {id = song.Teams.TeamId})'"> 
      <img src="@Url.Content(@song.Teams.LogoUrl)" height="35" width="35"/> 
     </td> 
     <td>@song.Fightsong.songname</td> 
     <td>@song.Fightsong.duration</td> 
     <td><a href="@Url.Content(@song.Fightsong.songurl)" class="playbtn"><i data-songid="@Url.Content(@song.Fightsong.FightSongId.ToString())" class="fa fa-play"></i></a></td> 
     <td>@song.Fightsong.PlayCount</td> 
    </tr> 
}

Вот мой сценарий. Код для изменения playbutton останавливается до того, как var clickedSongId. То есть, чтобы подсчитать количество кликов, пожалуйста, не обращайте внимания.

$(document).ready(function() { 
    $('.playbtn').click(function() { 
     var className = i.getAttribute("class"); 
     if (className == "fa-play") { 
      i.className == "fa-pause" 
     } 
     var clickedSongId = $(this).find('i').data('songid'); 
     var fightsong = { Id: clickedSongId }; 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("UpdatePlayCount", "Team")', 
      contentType: "application/json; charset=utf-8", 
      //data: fightsong, 
      data: JSON.stringify(fightsong), 
      dataType: "json" 

     });    
    }); 
});

источник

2015-07-31 bucs10us

Это вы что искали?

if ($('.playbtn i[class*=fa-play]').length > 0) { 
    $('.playbtn i[class*=fa-play]').removeClass('fa-play').addClass('fa-pause'); 
} else if ($('.playbtn i[class*=fa-pause]').length > 0) { 
    $('.playbtn i[class*=fa-pause]').removeClass('fa-pause').addClass('fa-play'); 
}

Вот более подробный вариант -

$(document).ready(function() { 
 
    $('.playbtn').click(function() { 
 
    if ($('.playbtn i[class*=fa-play]').length > 0) { 
 
     $('.playbtn i[class*=fa-play]').removeClass('fa-play').addClass('fa-pause'); 
 
    } else if ($('.playbtn i[class*=fa-pause]').length > 0) { 
 
     $('.playbtn i[class*=fa-pause]').removeClass('fa-pause').addClass('fa-play'); 
 
    } 
 
    var clickedSongId = $(this).find('i').data('songid'); 
 
    var fightsong = { 
 
     Id: clickedSongId 
 
    }; 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: '@Url.Action("UpdatePlayCount", "Team")', 
 
     contentType: "application/json; charset=utf-8", 
 
     //data: fightsong, 
 
     data: JSON.stringify(fightsong), 
 
     dataType: "json" 
 

 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" /> 
 
<tr> 
 
    <td onclick="location.href = '@Url.Action(" Details ", "Team ", new {id = song.Teams.TeamId})'"> 
 
    <img src="#" height="35" width="35" /> 
 
    </td> 
 
    <td>@song.Fightsong.songname</td> 
 
    <td>@song.Fightsong.duration</td> 
 
    <td><a href="#" class="playbtn"><i data-songid="#" class="fa fa-play"></i></a> 
 
    </td> 
 
    <td>@song.Fightsong.PlayCount</td> 
 
</tr>

источник

2015-07-31 15:19:31

Это близко. Он меняет все значки страниц. Мне нужно просто изменить значок для этой конкретной песни. Спасибо – coggicc

Вы просто указали ID для этого тега i –

Обновлен ответ .. –

Вот код, который позволяет переключаться между воспроизведением и паузой. Я добавил fixed width к моему решению, так как некоторые значки различной ширины.

HTML:

<body> 
    <h1> 
    <i class="fa fa-fw fa-play"></i> 
    </h1> 
</body>

JavaScript:

$(function() { 
    $('.fa').click(function() { 
    var wasPlay = $(this).hasClass('fa-play'); 
    $(this).removeClass('fa-play fa-pause'); 
    var klass = wasPlay ? 'fa-pause' : 'fa-play'; 
    $(this).addClass(klass) 
    }); 
});

Plunker

источник

2015-07-31 15:23:23

Это не учитывает, что он уже находится в $ ('.playbtn'). click (function() {} event. Решение не работает внутри этого. – coggicc

Изменить fontawesome icon on click

ответ

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