点击时切换div中的单词？

Posted 2023-02-25

【中文标题】点击时切换div中的单词？

【英文标题】：Toggling words in divs on click?

【发布时间】：2013-10-23 15:46:36

【问题描述】：

请看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();
);

【问题讨论】：

你应该看看使用.each

【参考方案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);

有几点需要注意。

您只需将操作设为通用 只有一个函数 有一行将此函数绑定到每个栏的点击事件...在函数中自动提供“e”作为事件参数，并且始终与事件相关 $.each 将遍历整个集合 我们将每个条形图与发起事件的条形图进行比较，并在比赛和 !match 上执行我们需要做的事情

【讨论】：

感谢您的回答，我确实需要简化，但是当再次单击同一个栏时，我还需要暂停音频。我也听不到点击音频？

您可以输入任何您想要触发音频的功能...这就是我按照我的方式分解它的重点...只需将您的逻辑放入适当的部分$.each 块

【参考方案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/