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

时间：2019-02-01 05:27:55

标签： javascript jquery html css webpage

我有一个标头，三个不同的类定义了三个不同的大小。单击不同的按钮后，我需要将大小类应用于标题，并删除现有的标题大小类。

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');
    }
});
});

5 个答案:

答案 0 :(得分：3)

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

请务必阅读评论，并查看属性大小

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>

答案 1 :(得分：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的data属性。

答案 2 :(得分：1)

您可以这样做：

    <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"跟踪当前单击的内容以及单击时要应用的类。您可以为data属性找到一个更好的名称。

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

答案 3 :(得分：1)

您的代码有几个问题。首先，jQuery块中存在语法错误。在removeClass调用中，您的班级名称后面也不需要空格。但是最大的问题是您需要能够确定用户是否单击了“小”，“中”或“大”才能应用正确的类。否则，如果您进行我提到的其他更正，那么现在您基本上将只在这三个类之间进行切换。

这是解决每个列表元素（小，中，大）的单击处理程序的方法：

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。例如，使用此功能，您可以删除所有以"w-"开头的类：

$.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");

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

答案 4 :(得分：1)

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

这是可行的解决方案。

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>

相关问题
最新问题