javascript - 我可以通过 JQuery 为特定的一组元素交换 CSS 类吗？

Question

我有两个 LI，如下所示:-

<li name="luxury" class="cars luxury>                                           
    <div id="featured_lux" name="featured" class="carImg_lux col2_lux ">
        My Luxury Car<img border="0" class="car-image_lux" src="/images/toycar_luxury.gif">
    </div>

    <div class="brandName_lux col2_lux">
        <h2 class="showBig_lux">
            Ferrari or Ford Mustang
        </h2> 

    </div>          

</li>

还有这个

<li name="normal" class="cars normal>
        <div id="featured_normal" name="normal" class="carImg_normal col2_normal ">
            My Normal Car<img border="0" class="car-image_lux" src="/images/toycar_normal.gif">
        </div>

        <div class="brandName_normal col2_normal">
            <h2 class="showBig_normal">
                Alto or Innova
            </h2> 

        </div>          

    </li>

两者看起来很相似。区别在于它们的 CSS 类和内容。

我可以通过 Jquery 为两组元素交换 CSS 类吗？ 例如。 Normal Car Section 应与 Luxury CSS 一起应用，反之亦然。

我可以通过在 jQuery 中使用 addClass() 和 removeClass() 来实现它。 有没有代码行最少的直接方法？

以上方法应该根据某些条件默认运行。 (没有点击或悬停。)

我不想使用任何外部库( iF EXIST )。

请帮忙。谢谢:)

Answer 1

您可以使用toggleClass。

$(function() {
    $('.swap').click(function() {
        $('.a, .b').toggleClass('a b');
    });
});
                    

.a { background: red; }
.b { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a">#</div>
<div class="b">#</div>
<input type="button" class="swap" value="Swap Classes" />

您可以创建一个函数来将类传递给它进行交换。这是一个例子:

$(function() {
    swapClasses('red', 'blue');
    function swapClasses(a, b) {
        $('.' + a + ', ' + '.' + b).toggleClass(a + ' ' + b);
    }
});

body {
    color: white;
    font-weight: bold;
}
div {
    padding: 4px;
    margin: 4px;
}
.red { background: red; }
.blue { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">RED</div>
<div class="blue">BLUE</div>

fiddle :https://jsfiddle.net/z2ogcs3x/