Question

早上好，

我正在尝试在3个类之间切换，以便为文本框指定颜色。 toggleClass方法适用于2个类但不适用于3个所以我根据我在SO上发现的响应编写了一个函数，以便如何在3个类之间切换。在我第一次点击准备按钮切换类之后，它不是切换类，而是删除所有现有的类，并在数组中添加类，而不是将数组中的3个类之一附加到结尾。这是因为文本框是按类定位的，这使我无法单击按钮继续下一个类。如何更改我的代码以阻止它删除初始类？

JQuery的

    $(document).ready(function () {
    
        $('#btn1').click(function() {
            $('.tb1').each(function () {
                var classes = ['red', 'green', 'blue'];
                this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
            });
        });
    });

.tbleft{
    font-size: 63px;
    width: 28%;
    color:white;
    margin-top:.5%
}
.tbcenter{
    font-size: 63px;
    width: 20%;
    color:white;
    margin-top:.5%
}
.green{
    background-color: green;
}
.red{
    background-color: red;
}
.blue{
    background-color:dodgerblue;
}

<form class="leftform" action="/write" method="post">
       <input class="tb1 tbleft red" id="tb1-1" type="text" name="loads"/>
       <input class="tb1 tbcenter red" id="tb1-2" type="text" name="door"/>
       <input class="tb1 tbcenter red" id="tb1-3" type="text" name="quad"/>
       <input class="btn" id="btn1" type="button" value="Ready"/>
       </form>

jsfiddle

任何帮助将不胜感激。

Answer 1

您可以尝试以下代码。我做了一些重大改变来旋转颜色：

＆＃13;

$(document).ready(function() {
  var classes = ['red', 'green', 'blue'];
  $('#btn1').click(function() {
    $('.tb1').each(function() {
      var current = $(this);
      $(classes).each(function(k, v) {
        if (current.hasClass(v)) {
          var keyNum = k + 1
          if (classes.length == (k + 1)) {
            keyNum = 0
          }
          current.removeClass(v).addClass(classes[keyNum]);
          return false;
        }
      });
    });
  });
});

＆＃13;

.tbleft {
  font-size: 63px;
  width: 28%;
  color: white;
  margin-top: .5%
}

.tbcenter {
  font-size: 63px;
  width: 20%;
  color: white;
  margin-top: .5%
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.blue {
  background-color: dodgerblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="leftform" action="/write" method="post">
  <input class="tb1 tbleft red" id="tb1-1" type="text" name="loads" />
  <input class="tb1 tbcenter red" id="tb1-2" type="text" name="door" />
  <input class="tb1 tbcenter red" id="tb1-3" type="text" name="quad" />
  <input class="btn" id="btn1" type="button" value="Ready" />
</form>

＆＃13;

Answer 2

创建2个名为previousClass和newClass的变量：

$(document).ready(function () {

    var previousClass = "red", newClass = "red";
    var classes = ['red', 'green', 'blue'];

    $('#btn1').click(function () {
        previousClass = newClass;
        newClass = classes[($.inArray(previousClass, classes) + 1) % classes.length];

        $('.tb1').each(function () {
            $(this).removeClass(previousClass).addClass(newClass);
        });
    });
});

这是一个小提琴：https://jsfiddle.net/Lrjsheot/1/

Answer 3

你要从元素中删除所有类的原因是因为那些不在数组中的类也将被剥离。

由于red也保证在您的classes列表中，我们可以：

通过classList
根据返回的颜色类
使用classList.remove()删除旧课程
使用classList. add()添加新课程

当然，这意味着浏览器needs to support the modern DOMTokenList API。

$(document).ready(function() {

  var classes = ['red', 'green', 'blue'];

  $('#btn1').click(function() {
    $('.tb1').each(function() {
      // Retrieve color classes from classList by checking if it is in classes array
      var colorClass = [].filter.call(this.classList, function(cls) {
        return classes.indexOf(cls) > -1;
      })[0];
      
      // Get new color
      var newColorClass = classes[($.inArray(colorClass, classes) + 1) % classes.length];
      
      // Remove old class, add new class
      this.classList.remove(colorClass);
      this.classList.add(newColorClass);
    });
  });
});

.tbleft {
  font-size: 63px;
  width: 28%;
  color: white;
  margin-top: .5%
}

.tbcenter {
  font-size: 63px;
  width: 20%;
  color: white;
  margin-top: .5%
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.blue {
  background-color: dodgerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="leftform" action="/write" method="post">
  <input class="tb1 tbleft red" id="tb1-1" type="text" name="loads" />
  <input class="tb1 tbcenter red" id="tb1-2" type="text" name="door" />
  <input class="tb1 tbcenter red" id="tb1-3" type="text" name="quad" />
  <input class="btn" id="btn1" type="button" value="Ready" />
</form>

Answer 4

您可以使用数据属性。只需为data-colors属性添加另一种颜色。

＆＃13;

var colorsStr = $('#btn1').data('colors');
var colorsArr = colorsStr.split(',').reverse();
var index = colorsArr.length - 1;

$('#btn1').click(function() {

  if (index < 0) index = colorsArr.length - 1;
  
  $.each($('.tb1'), function(key, val) {
    $(val).css('background-color', colorsArr[index]);
  })

  index -= 1;
});

＆＃13;

.tbleft{
    font-size: 63px;
    width: 28%;
    color:white;
    margin-top:.5%
}
.tbcenter{
    font-size: 63px;
    width: 20%;
    color:white;
    margin-top:.5%
}
.red{
    background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="leftform" action="/write" method="post">
  <input class="tb1 tbleft red" id="tb1-1" type="text" name="loads"/>
  <input class="tb1 tbcenter red" id="tb1-2" type="text" name="door"/>
  <input class="tb1 tbcenter red" id="tb1-3" type="text" name="quad"/>
  <input class="btn" id="btn1" type="button" value="Ready" data-colors="green, blue, red"/>
</form>

＆＃13;

Answer 5

不要使用this.className，请尝试使用$(this).addClass()和$(this).removeClass()。

this.className会覆盖您为该元素所拥有的所有类。相反，您只想删除颜色类，并添加一个新颜色类。

类切换删除其他类

5 个答案: