jQuery在父div外部添加/刪除多個元素的類

Question

我知道將有一種簡單的方法來完成此任務，只是努力使自己步入正軌。 因此，我有一個父div，其中包含多個div，如果單擊父div外部的div，則需要一個歸屬於它們的開放類。 將嘗試通過html示例進行說明。

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>

因此，如果單擊.playerBtn.playerAll，則我要同時使用該div和.playerViewer（在本例中為.playerAll.playerView）內的相應div來接收打開的類以及在#mediaPlayer內部打開該類的任何其他div該班公開課被刪除。

Answer 1

這是一個可能會起作用的jQuery函數。 進行復雜的DOM橫向轉換的原因是要考慮到單個頁面上可能有多個播放器的事件。

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

參見此處的概念驗證小提琴： http ： //jsfiddle.net/kYqcn/

Answer 2

這將解決問題

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

如果您在#mediaPlayer之外的其他父div中有playerViewer div，

將$(".playerViewer")更改$(".playerViewer") $("#mediaPlayer .playerViewer")

Answer 3

嘗試這個：

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