点击时切换div中的单词？

Question

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

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

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

这里是一个sn-p的代码，不过请看fiddle看看

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

在这里...只需为此废弃所有 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. 我们将每个条形图与发起事件的条形图进行比较，并在比赛和 !match 上执行我们需要做的事情

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 中的一些内容（条形 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/