Question

我有一个歌曲列表，都有一个播放按钮（fontawesome）。我想单击其中一个并将图标从播放按钮更改为暂停按钮。如果我单击另一首歌曲的播放按钮，其他图标需要更改回播放按钮。单击它时图标不会改变，虽然它确实可以播放我的歌曲。感谢

这是我的观点和foreach循环。该播放按钮是以<body ng-app="ezer" ng-controller="main-cntrl"> <div ui-view="header"></div> <div ui-view="footer"></div> </body>

开头的按钮

<td><a href=

这是我的脚本。播放按钮更改的代码在var clickedSongId之前停止。这是计算点击次数所以请忽略。

@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>
}

Answer 1

这是你正在寻找的吗？

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');
}

这是一个更详细的版本 -

＆＃13;

$(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"

    });
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

这是在播放和暂停之间切换的代码。我在我的解决方案中添加了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

点击更改fontawesome图标

2 个答案: