jquery add/remove class of multiple elements outside of parent div

Question

I know there will be a simple way to accomplish this, just struggling to get my head around it. So I have one parent div that holds multiple divs that need an open class attributed to them if a div that is outside the parent div is clicked. Will try explain through an html example.

HTML

<div id="mediaPlayer">
    <div class="playerViewer">
        <div class="playerViewControls">
            <img src="img/player-button-prev.png" class="playerPrev" alt="prev" />
            <img src="img/player-button-next.png" class="playerNext" alt="next" />
        </div>
        <div class="playerAll playerView">
            <img src="img/placeholder/player-image.jpg" alt="placeholder image" />
        </div>
        <div class="playerPhoto playerView">
            <img src="img/placeholder/player-image.jpg" alt="placeholder image" />
        </div>
        <div class="playerVideo playerView">
            <img src="img/placeholder/player-image.jpg" alt="placeholder image" />
        </div>
        <div class="playerMap playerView">
            <img src="img/placeholder/player-image.jpg" alt="placeholder image" />
        </div>
        <div class="playerRelated playerView">
            <img src="img/placeholder/player-image.jpg" alt="placeholder image" />
        </div>
    </div>
    <div class="playerControl">
        <div class="playerBtn playerAll">
            <img src="img/player-button-all.jpg" alt="player button all" />
            <p>(120) ALL<br />MEDIA</p>
        </div>
        <div class="playerBtn playerPhoto">
            <img src="img/player-button-photo.jpg" alt="player button photo" />
            <p>(40) PLACE<br />PHOTOS</p>
        </div>
        <div class="playerBtn playerVideo">
            <img src="img/player-button-video.jpg" alt="player button video" />
            <p>(40) PLACE<br />VIDEOS</p>
        </div>
        <div class="playerBtn playerMap">
            <img src="img/player-button-map.jpg" alt="player button map" />
            <p>LOCATION<br />MAP</p>
        </div>
        <div class="playerBtn playerRelated">
            <img src="img/player-button-related.jpg" alt="player button related" />
            <p>(40) RELATED<br />MEDIA</p>
        </div>
    </div>
</div>

So if .playerBtn.playerAll is clicked I want BOTH that div and it's corresponding div inside .playerViewer (which in this case would be .playerAll.playerView) to receive the class open and any other div's with the class open inside #mediaPlayer to have the class open removed.

Answer 1

Here is a jQuery function that will probably work. The reason for the complicated DOM transversal is to account for the event that there might be more than one player on a single page.

$(function() {
    $('.playerControl .playerBtn').click(function() {
        var $playerViewer = $(this).parent('.playerControl').prev('.playerViewer'),
            // Remove the first class called playerBtn
            $relatedEle = $playerViewer.find('.'+$(this).attr('class').replace(/playerBtn\s/gi,''));

        // Add class
 $(this).add($relatedEle).addClass('open');

        // Remove class from siblings in two separate containers
        $(this).siblings().removeClass('open');
        $relatedEle.siblings().removeClass('open');
    });
});

See proof-of-concept fiddle here: http://jsfiddle.net/kYqcn/

Answer 2

This will do the trick

 $(".playerBtn.playerAll").on("click", function() {
  $(".playerViewer").each(function() {
    if($(this).hasClass("open")) {
       $(this).removeClass("open");
    } else {
     $(this).addClass("open");
    }
  });
});

If you have playerViewer divs inside different parent divs other than #mediaPlayer,

Change $(".playerViewer") to $("#mediaPlayer .playerViewer")

Answer 3

Try this:

$('#mediaPlayer .playerBtn').click(function () {
    var className = $.trim($(this).attr('class').replace('playerBtn', ''));
    $('#mediaPlayer .open').removeClass('open');
    $('#mediaPlayer .' + className).addClass('open');
});