Question

我有一个由JQuery控制的播放，暂停按钮，当我点击播放按钮时它变为隐藏，然后我点击暂停相反的动作将会消失。问题是我有超过5对按钮具有相同的类，所以当我点击第一个播放按钮时突然显示其他暂停按钮..我怎么能克服这个？我知道我可以将每个<a>标签分配给不同的类/ ID ..但是还有其他任何解决方案吗？

这是我的html ..

    <div>
    <img src="images/quicktime_logo.gif" width="32" height="30" alt="Quicktime" border="0" align="left" />
    <a href="javascript:document.movie1.Play();" class="quicktime_play_btn"></a>
    <a href="javascript:document.movie1.Stop();" class="quicktime_pause_btn"></a>
    </div>

<div>
    <img src="images/quicktime_logo.gif" width="32" height="30" alt="Quicktime" border="0" align="left" />
    <a href="javascript:document.movie1.Play();" class="quicktime_play_btn"></a>
    <a href="javascript:document.movie1.Stop();" class="quicktime_pause_btn"></a>
    </div>

<div>
    <img src="images/quicktime_logo.gif" width="32" height="30" alt="Quicktime" border="0" align="left" />
    <a href="javascript:document.movie1.Play();" class="quicktime_play_btn"></a>
    <a href="javascript:document.movie1.Stop();" class="quicktime_pause_btn"></a>
    </div>

<div>
    <img src="images/quicktime_logo.gif" width="32" height="30" alt="Quicktime" border="0" align="left" />
    <a href="javascript:document.movie1.Play();" class="quicktime_play_btn"></a>
    <a href="javascript:document.movie1.Stop();" class="quicktime_pause_btn"></a>
    </div>

我的JQuery看起来像..

 var $ab = jQuery.noConflict();
              $ab(document).ready(function() {
                    $ab(".quicktime_play_btn").click(function() {
              $ab(this).hide();
              $ab(".quicktime_pause_btn").css("display", "block");
});         

                    $ab(".quicktime_pause_btn").click(function() {
              $ab(this).hide();
              $ab(".quicktime_play_btn").show();
});     
                });

Answer 1

您需要为链接指定不同的ID，或使用jQuery的方法查找“next”和“prev”元素来控制可见性。

<a href="javascript:Play();" class="quicktime_play_btn"></a>
<a href="javascript:Stop();" class="quicktime_play_btn"></a>

function Play() {
 document.movie1.Play();
 $(this).hide().next().show();
}

function Stop() {
 document.movie1.Stop()
 $(this).hide().prev().show();
}

Answer 2

使用jQuery的父函数：

而不是：

$ab('this').hide();
$ab(".quicktime_pause_btn").css("display", "block");

使用：

$ab('this').hide().parent().find(".quicktime_pause_btn").css("display", "block");

通过这个，你得到div容器（父）并查看类“quicktime_pause_btn”的内容

或者，使用最近的函数：

$ab('this').hide().closest('div').find(".quicktime_pause_btn").css("display", "block");

同样的方法......

或者使用next / prev：

$ab('this').hide().next().show();

使用第二个按钮反之亦然。

播放暂停按钮问题？

2 个答案: