Question

$(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>

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

Answer 1

我建议不要使用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中缺少注释的函数和音频函数调用

Answer 2

这是一种方式：

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/

Answer 3

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

FIDDLE shows the buttons better

＆＃13;

$(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();
    });
});

＆＃13;

#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; }

＆＃13;

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

＆＃13;

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

3 个答案: