在点击单元格切换单词？

Question

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

我有7音轨，我需要播放和暂停，当用户点击他们的div。到目前为止，我有一个非常冗长的代码，这样做。但是，我试图在单击时切换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(); 
}); 

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

Answer 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. $。每个将遍历整个集合
5. 我们将每个酒吧与发起事件的酒吧进行比较，并且做我们需要在两个匹配上做的事情和！匹配