点击电视上的文字切换？
点击电视上的文字切换？
提问于 2013-10-23 15:46:36
请看这个http://jsfiddle.net/rabelais/bJxaL/
我有7个音频轨道，我需要播放和暂停时，用户点击他们的div。到目前为止，我有一段非常长的代码来完成这个任务。但是，当点击div时，我试图在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();
});回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-23 16:51:12
我设法让它使用以下代码：
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/
Stack Overflow用户
发布于 2013-10-23 16:16:48
如果您实际上不需要在每个条形图中使用两个单独的元素，那么Here...just可以将所有的js用于this...and，您甚至可以简化标记。
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);有几件事要注意。
- 您只需要使操作泛化
- 只有一个函数
- 有一行将此函数绑定到每个bar...automatically的单击事件，在函数中提供'e‘作为事件参数，并且总是相对于事件
- $.each将遍历整个集合
- 我们将每个栏与发起事件的条形图进行比较，并对匹配和匹配执行所需的操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19546375
复制相关文章
相似问题
腾讯云开发者
