jQuery在父div外部添加/删除多个元素的类

JVK 发表于 Dev

合资企业

我知道将有一种简单的方法来完成此任务，只是努力使自己步入正轨。因此，我有一个父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该班公开课被删除。

特里

这是一个可能起作用的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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。