我可以通过JQuery将CSS类交换为一个特殊的元素集吗

Can I swap CSS classes for a particluar Set of element through JQuery?

本文关键字：一个 元素 JQuery 可以通过 CSS 交换      更新时间：2023-09-26

我有两个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类吗？例如普通车厢应采用豪华CSS和反之亦然。

我可以通过在jQuery中使用addClass（）和removeClass（）来实现它。有没有任何直接的方法只需最少的代码工作量？

上述方法应根据某些条件默认运行。（无点击或悬停。）

我不想使用任何外部库（iF EXIST）。

请帮忙。感谢：）

您可以使用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>

小提琴：https://jsfiddle.net/z2ogcs3x/

如果你想使用普通代码，你可以使用you May Not Need jQuery，这是一个带有jQuery方法及其普通实现的网站。

例如：

jQuery代码：

$(el).addClass(className);

香草代码：

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
相关文章：