1

请看这个http://jsfiddle.net/rabelais/bJxaL/

当用户点击他们的 div 时，我需要播放和暂停 7 个音轨。到目前为止，我有一段很长的代码可以做到这一点。但是，我试图在单击 div 时切换标题和单词 pause 并且我不知道如何在单击与播放的另一个 div 不同的 div 时使标题切换回来？

如果您查看小提琴并单击一个 div 然后单击另一个音频将在您单击的第一个 div 上暂停并播放第二个音频但第一个 div 仍然显示“暂停”，我需要它然后显示歌曲标题再次。

这是代码片段，但请查看小提琴以查看全部内容

 $("#one").click(function () {
 if ($('#sound-1').get(0).paused == false) {
    $('#sound-1').get(0).pause();
 } else {
    $('#sound-1').get(0).play();
   }
 $('#one i').toggle();
$('#sound-2').get(0).pause();
$('#sound-3').get(0).pause();
$('#sound-4').get(0).pause();
$('#sound-5').get(0).pause();
$('#sound-6').get(0).pause();
$('#sound-7').get(0).pause();
});
$("#two").click(function () {
 if ($('#sound-2').get(0).paused == false) {
    $('#sound-2').get(0).pause();
 } else {
    $('#sound-2').get(0).play();
   }
 $('#two i').toggle();
$('#sound-1').get(0).pause();
$('#sound-3').get(0).pause();
$('#sound-4').get(0).pause();
$('#sound-5').get(0).pause();
$('#sound-6').get(0).pause();
$('#sound-7').get(0).pause();
});
4

2 回答 2

2

在这里...只需为此废弃所有 js...如果您实际上不需要每个栏中的 2 个单独的元素，您甚至可以简化您的标记。

http://jsfiddle.net/beauxjames/bJxaL/3/

function toggleTheWorld(e) {

    var bars = $("#sound-bars .bars"),
        $thisBar = $(e.currentTarget);

    $.each(bars, function(index, bar) {
        var iPlay = $(bar).find('.play'),
            iStop = $(bar).find('.stop');
        if( $thisBar.attr('id') == $(bar).attr('id') ) {
            iPlay.toggle(false);
            iStop.toggle(true);
        } else {
            iPlay.toggle(true);
            iStop.toggle(false);
        }

    });
}

$("#sound-bars .bars").click(toggleTheWorld);

有几点需要注意。

  1. 你只需要使操作通用
  2. 只有一个功能
  3. 有一行将此函数绑定到每个栏的单击事件...自动提供'e'作为函数中的事件参数，并且始终与事件相关
  4. $.each 将遍历整个集合
  5. 我们将每个 bar 与发起事件的 bar 进行比较，并在 match 和 !match 上执行我们需要做的事情
于 2013-10-23T16:16:48.027 回答
1

我设法让它使用以下代码：

var $bars = $('.bars');
var pauseWord = 'pause'; // Because I've got rid of <i>pause</i> things

$bars.each(function () {
    // Save songtitle in data attribute
    $(this).data('title', $(this).find('i').text());
});

$bars.click(function () {
    // Work on the selected audio
    var songNumber = $(this).attr('id').replace('song-', '');
    var sound = $('#sound-' + songNumber).get(0);
    if(sound.paused){
        sound.play();
        $(this).find('i').html(pauseWord);
    } else {
        sound.pause();
        $(this).find('i').html($(this).data('title'));
    }
    // Set other bars to its default state and pause other audios
    $bars.not(this).each(function(){
        $(this).find('i').html($(this).data('title'));
        $('#sound-' + $(this).attr('id').replace('song-', '')).get(0).pause();
    });
});

顺便说一句，我也更改了您的 HTML 中的一些内容（条形 ID 和暂停）：

<div id="song-1" class="bars">
    <div class="songtitle"><i class="play">I tried to tell you</i>
    </div>
</div>
<div id="song-2" class="bars">
    <div class="songtitle"><i class="play">Intro</i>
    </div>
</div>
<div id="song-3" class="bars">
    <div class="songtitle"><i class="play">Vocal</i>
    </div>
</div>
<div id="song-4" class="bars">
    <div class="songtitle"><i class="play">Can</i>
    </div>
</div>
<div id="song-5" class="bars">
    <div class="songtitle"><i class="play">Confusion</i>
    </div>
</div>
<div id="song-6" class="bars">
    <div class="songtitle"><i class="play">i</i>
    </div>
</div>
<div id="song-7" class="bars">
    <div class="songtitle"><i class="play">My Heart</i>
    </div>
</div>

这是更新的 JSFiddle：http: //jsfiddle.net/Oliboy50/bJxaL/39/

于 2013-10-23T16:51:12.470 回答