Question

如何遍历每个兄弟并为每个兄弟分别提供不同的课程？当一个人活跃时，我希望删除兄弟姐妹中的所有课程。

现在我明白了：

$('.font-size').click(function() {
  $('.font-size.font-size-active').removeClass('font-size-active');
   $(this).addClass("font-size-active");
  });

所以基本上我有3个字体大小的div。当用户点击其中一个按钮时，会更改背景颜色。到目前为止，我得到了它的工作。然而，我想给每个人一个独特的附加类，相应地改变字体大小。

我该怎么做？我在脑海中有索引但不完全确定它是否有效以及如何在此上下文中使用它。

标记：

<span class="font-size">Small</span>
<span class="font-size">Medium</span>
<span class="font-size">Large</span>

编辑： .small，.medium，.large类会添加到.content div，具体取决于点击的按钮。

Answer 1

我会在要添加的类中设置data属性：

<span class="font-size" data-class="small">Small</span>
<span class="font-size" data-class="medium">Medium</span>
<span class="font-size" data-class="large">Large</span>

然后以这种方式使用它：

var $sizes = $('.font-size').click(function () {
    $sizes.removeClass('font-size-active');
    $(this).addClass("font-size-active");
    $('.content').removeClass('small medium large').addClass($(this).data('class'));
});

请参阅下面的演示。

var $sizes = $('.font-size').click(function () {
    $sizes.removeClass('font-size-active');
    $(this).addClass("font-size-active");
    $('.content').removeClass('small medium large').addClass($(this).data('class'));
});

.font-size {padding: 10px; display: inline-block;}
.font-size-active {background: #EEE;padding: 10px;}
.small {font-size: 80%;}
.medium {font-size: 100%;}
.large {font-size: 120%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="font-size" data-class="small">Small</span>
<span class="font-size" data-class="medium">Medium</span>
<span class="font-size" data-class="large">Large</span>

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestias expedita quo ipsa enim quasi ea aspernatur rerum dolorum voluptatum saepe voluptate aliquam quibusdam veniam sint asperiores id est nesciunt!</div>

Jquery：循环遍历每个兄弟，给他们每个人一个不同的类？

1 个答案: