CODEWITHSUNDEEP
jqueryhtmlcss
Akhil Paul
Akhil Paul

Reputation: 721

play pause button issue?

I have a play, pause button which controlled by JQuery, when I click play button it becomes hide and next I click to pause the opposite action will fuinctioning. The problem is I have more than 5 pairs of buttons with the same class, so when I click the first play button suddenly shows the other pause buttons too.. how can I overcome this? I know I can give each <a> tags to separate classes/IDs..but is there for any other solutions?

here is the html I have..

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

and my JQuery looks like..

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

Upvotes: 0

Views: 304

Answers (2)

Simon Steinberger
Simon Steinberger

Reputation: 6825

Use the parent function of jQuery:

Instead of:

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

Use:

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

By that, you get the div container (parent) and look inside of that for the class "quicktime_pause_btn"

Alternatively, use the closest function:

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

Same approach ...

Or with next/prev:

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

Vice versa with your second button.

Upvotes: 1

Matt
Matt

Reputation: 1911

You are going to either need to assign distinct IDs to your links, or use jQuery's methods of finding "next" and "prev" elements to control visibility.

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

Upvotes: 2

Related Questions