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

Question

我有一个 header 和三个不同的 classes 定义了三种不同的尺寸。单击不同的按钮时，我需要将大小 class 应用到 header 并删除现有的标题大小 class.

<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

您的 jQuery 有一些错误：

$('.list-inline-item').on('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');
  }
});

但无论哪种方式，代码都没有多大意义，因为您单击的是什么项目并不重要。

编辑：

html:

<div class="row">
    <div class="col-sm-12">
        <div class="layout-attachments">
        <ul class="list-inline layout-components">
            <li class="list-inline-item" data-size="w-50-p"><a id="smallHeader">S</a></li>
            <li class="list-inline-item" data-size="w-75-p"><a id="mediumHeader">M</a></li>
            <li class="list-inline-item" data-size="w-100-p"><a id="largeHeader">L</a></li>
        </ul>
        <h1 id="w-75-p" class="img-responsive img-thumbnail">Change the class of this element</h1>
    </div>
</div>

jQuery:

$('.list-inline-item').on('click', function() {
  var newSize = $(this).attr("data-size");
  $(".layout-attachments h1").removeAttr("id").attr("id", newSize)
});

css:

#w-50-p {font-size: 18px;}
#w-75-p {font-size: 26px;}
#w-100-p {font-size: 34px;}

最简单的方法是在目标元素上使用 id 并设置引用正确 id 的数据属性。

Answer 2

你可以这样做：

    <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" data-new-class="w-50-p">S</a></li>
                <li class="list-inline-item"><a id="mediumHeader" class="active" data-new-class="w-75-p">M</a></li>
                <li class="list-inline-item"><a id="largeHeader" data-new-class="w-100-p">L</a></li>

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

有一个 class="active" 和 data-new-class="w-75-p" 跟踪当前单击的内容以及单击时要应用的内容 class。您可以为数据属性找到一个更好的名称。

对于javascript：

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

  var $activeSize = $('.list-inline-item a.active');
  // removes active from current
  $activeSize.removeClass('active');

  var $heading = $('.layout-attachments h1')

  //removes the class and add class you want
  $heading.removeClass($activeSize.data('newClass'));
  $heading.addClass($(this).data('newClass'));

  //add active to the clicked one
  $(this).addClass("active")
});

JS Fiddle

Answer 3

您的代码有几个问题。对于初学者，您的 jQuery 块中存在语法错误。在 removeClass 调用中，您的 class 名称后也不需要空格。但最大的问题是您需要能够确定用户是否单击了 "small"、"medium" 或 "large"，以便应用正确的 class。否则，如果您进行我提到的其他更正，就像现在一样，您基本上只会切换三个 classes.

以下是我解决问题的方法，每个列表元素（小、中、大）都有点击处理程序：

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

  if (e.target.id === "smallHeader") {
    // handle small case
    $(".layout-attachments h1").removeClass("w-75-p w-100-p").addClass("w-50-p");
  } else if (e.target.id === "mediumHeader") {
    // handle medium case
    $(".layout-attachments h1").removeClass("w-50-p w-100-p").addClass("w-75-p");
  } else if (e.target.id === "largeHeader") {
    // handle large case
    $(".layout-attachments h1").removeClass("w-50-p w-75-p").addClass("w-100-p");
  } else {
    // unhandled case
  }
});

.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/1.12.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"><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>
  </div>

您可以做的另一件事是向 jQuery 添加一个函数，而不是调用 removeClass 和其他您不想附加到元素的 classes根据某些子字符串删除所有 classes。例如，使用此函数，您可以删除所有以 "w-":

开头的 classes

$.fn.removeClassStartingWith = function (filter) {
    $(this).removeClass(function (index, className) {
        return (className.match(new RegExp("\S*" + filter + "\S*", 'g')) || []).join(' ')
    });
    return this;
};

你可以像这样调用它：

$(".layout-attachments h1").removeClassStartingWith("w-").addClass("w-50-p");

这不是绝对必要的，但可能会有用。

Answer 4

这很容易。这里我举个例子。

确保阅读评论并查看属性大小

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>

Answer 5

维护 class 将列表项中的字体大小更改为数据属性，并将新的 class 添加到点击事件的目标中！

这是可行的解决方案..

var $item = $('.list-inline-item'),
  $target = $('.img-responsive.img-thumbnail');

$item.on('click', function() {
  var size = $(this).find('a').data('size');
  
  $target
    .removeClass('w-50-p w-75-p w-100-p') // remove size classes
    .addClass(size);
});

.w-50-p {
  font-size: 1em;
}

.w-75-p {
  font-size: 1.5em;
}

.w-100-p {
  font-size: 2em;
}

.list-inline-item a {
  cursor: pointer;
}

<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"><a data-size="w-50-p">S</a></li>
        <li class="list-inline-item"><a data-size="w-75-p">M</a></li>
        <li class="list-inline-item"><a data-size="w-100-p">L</a></li>

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

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

Switching between three classes with different names

html

javascript

css

jquery

webpage

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

Switching between three classes with different names

html

javascript

css

jquery

webpage

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