在 jquery 中定位暂停和播放按钮

Positioning of pause and play buttons in jquery

本文关键字：播放 按钮 暂停 定位 jquery      更新时间：2023-09-26
$(document).ready(function () {
    $("#pause").click(function () {
        $(this).hide();
        $("#play").show();
        $("#aa").stop(true, false);
        audioTag1.pause();
    });
    $("#play").click(function () {
        $(this).hide();
        $("#pause").show();
        animateaa();
    });
});

.html

<div style="position: absolute; right: 670px; bottom: 45px;">
    <div id="pause" onClick="pause.style.visibility= 'hidden'; play.style.visibility= 'visible';"></div>
</div>
<div style="position: absolute; left: 665px; bottom: 45px;">
    <div id="play" onClick="play.style.visibility= 'hidden'; pause.style.visibility= 'visible';"></div>
</div>

上面的代码我用于暂停和播放的功能，工作正常。现在我需要通过将这些按钮一个放在另一个之上来实现相同的效果，这样每当我单击一个按钮时，该按钮都应该被隐藏，另一个应该是可见的，但是从上面的代码中，按钮可以保留在同一个地方，但功能不起作用。请做建议。

我建议不要使用inline js code并隐藏父级，如下所示：

.HTML 

<div style="position: absolute; right: 670px; bottom: 45px; display: none;">
    <div id="pause">pause</div>
</div>
<div style="position: absolute; left: 665px; bottom: 45px;">
    <div id="play">play</div>
</div>

jQuery

$(document).ready(function () {
    $("#pause").click(function () {
        $(this).parents('div').hide();
        $("#play").parents('div').show();
        //$("#aa").stop(true, false);
        //audioTag1.pause();
    });
    $("#play").click(function () {
        $(this).parents('div').hide();
        $("#pause").parents('div').show();
        //animateaa();
    });
});

注意：注释函数和音频函数调用，因为它们在OP中缺失

您只需要将暂停的 CSS 添加到下面的脚本中即可

小提琴更好地显示按钮 

$(document).ready(function () {
    $("#pause").click(function () {
        $(this).hide();
        $("#play").show();
        $("#aa").stop(true, false);
        audioTag1.pause();
    }).hide(); // hide it initially
    $("#play").click(function () {
        $(this).hide();
        $("#pause").show();
        animateaa();
    });
});
#play { position: relative; border: 3px solid #fff; width: 36px; height: 36px; background-color: red; border-radius: 50%; visibility: hidden; } 
#play:before { position: absolute; left: 14px; top: 10px; content:''; border-left: 12px solid white; border-top: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: absolute; right: 670px; bottom: 45px;">
    <div id="pause"></div>
    <div id="play"></div>
</div>

这里有一种方法：

.html：

<div style="position: absolute;"> 
        <div id="pause"><button>pause</button></div>
        <div id="play" style="position:absolute; top:0; display:none;"><button>play</button></div></div>

.js：

$(document).ready(function() {
$("#pause").click(function() {
$(this).hide();
$("#play").show();
$("#aa").stop(true,false);
audioTag1.pause();
}); 
$("#play").click(function() {
$(this).hide();
$("#pause").show();
animateaa();
}); 
});

小提琴：

http://jsfiddle.net/98cc94nb/

或：

http://jsfiddle.net/98cc94nb/1/

相关文章：