在點擊單元格切換單詞？

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. 我們將每個酒吧與發起事件的酒吧進行比較，並且做我們需要在兩個匹配上做的事情和！匹配