javascript - 单击时切换 div 中的单词？

Question

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

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

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

这是代码片段，但请查看 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. 有一行将此函数绑定(bind)到每个条形图的点击事件...自动提供“e”作为函数中的事件参数，并且始终与事件相关
4. $.each 将遍历整个集合
5. 我们将每个柱状图与发起事件的柱状图进行比较，并在匹配和 !match 上做我们需要做的事情