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

Question

如何循环遍历每个兄弟并为每个兄弟分配不同的类？但是，当一个处于活动状态时，我希望删除兄弟姐妹中的所有类。

现在我得到了这个：

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

所以基本上我得到了 3 个字体大小的 div。当用户单击一个按钮时，该按钮会更改背景颜色。到目前为止，我已经开始工作了。然后我想给他们每个人一个独特的附加类，相应地改变字体大小。

我该怎么做？我脑子里有 indexof，但不完全确定它是否有效以及如何在这种情况下使用它。

标记：

<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>