javascript - 在三个不同名称的类之间切换

Question

我有一个 header ，三个不同的类定义了三种不同的尺寸。单击不同的按钮后，我需要将尺寸等级应用于标题并删除现有的标题尺寸等级。

JS Fiddle

<div class="row">
  <div class="col-sm-12">
    <div class="layout-attachments">
      <ul class="list-inline layout-components">
        <li class="list-inline-item"><a id="smallHeader">S</a></li>
        <li class="list-inline-item"><a id="mediumHeader">M</a></li>
        <li class="list-inline-item"><a id="largeHeader">L</a></li>

      </ul>
      <h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
</div>

jQuery:

this.$('.list-inline-item').click(function() {

    if ($('.layout-attachments h1').hasClass('w-50-p')) {
        $('.layout-attachments h1').removeClass('w-50-p').addClass('w-75-p ');
    } else if ($('.layout-attachments h1').hasClass('w-75-p ')) {
        $('.layout-attachments h1').removeClass('w-75-p ').addClass('w-100-p');
    } else if ($('.layout-attachments h1').hasClass('w-100-p')) {
        $('.layout-attachments h1').removeClass('w-100-p').addClass('w-50-p');
    }
});
});

Answer 1

这很容易。这里我做了一个例子。

确保阅读评论并查看属性 Size

var sizes= ["w-75-p", "w-100-p", "w-50-p" ] 
$('.list-inline-item').click(function() {
  sizes.forEach((item)=> $('.layout-attachments h1').removeClass(item) ); // reset the size.
  
  // now Add the right Size
  $('.layout-attachments h1').addClass($(this).attr("size"))

});

.w-50-p {
    font-size: 18px;
}

.w-75-p {
    font-size: 26px;
}

.w-100-p {
    font-size: 34px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
        <div class="col-sm-12">
            <div class="layout-attachments">
            <ul class="list-inline layout-components">
                <li class="list-inline-item" size="w-50-p"><a id="smallHeader">S</a></li>
                <li class="list-inline-item" size="w-75-p"><a id="mediumHeader">M</a></li>
                <li class="list-inline-item" size="w-100-p"><a id="largeHeader">L</a></li>
               
            </ul>
            <h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
        </div>
    </div>