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

Question

我如何遍历每个兄弟姐妹并给他们每个人一个不同的 class？但是，当一个处于活动状态时，我希望兄弟姐妹中的所有 classes 都被删除。

现在我得到了这个：

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

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

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

标记：

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

编辑： .small, .medium, .large classes 被添加到 .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：遍历每个兄弟姐妹并给他们每个人一个不同的类？

Jquery: Loop through each sibling and give each of them a different class?

javascript

jquery