Question

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

如果你看小提琴然后点击一个div，然后点击另一个div，音频将在你点击的第一个div上暂停并播放第二个音频，但第一个div仍显示'pause'，我需要它然后显示歌曲标题再次出现。

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

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

Answer 1

这里......为此废弃你所有的j ...如果你实际上并不需要每个栏中的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);

有几点需要注意。

你只需要使操作通用
只有一个功能
有一行将此函数绑定到每个条的click事件...自动在函数中提供'e'作为事件参数并始终相对于事件
$。每个将循环遍历整个集合
我们将每个酒吧与发起活动的酒吧进行比较，并在比赛和比赛中做我们需要做的事情。

Answer 2

我设法使用以下代码：

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中也改变了一些东西（条形码和暂停）：

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

在点击时切换div中的单词？

2 个答案: