Question

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

Answer 1

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.