Question

我试图访问共享同一类的多个span元素来更改其背景颜色。为了进一步说明，给出以下内容：

<div id = "circle-height">
 <span class="circle"></span>
 <span class="circle"></span>
 {multiple lines of span elements with class of "circle"}
</div>

并使用CSS样式：

.circle{
 display: inline-block;
 width: 20px;
 height: 20px;
 background: blue;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 margin-top:10px;
 margin-left:10px;
 float:left
}

我想将第一个元素切换到橙色背景，然后再将其永久性地更改为蓝色（再次循环之前），并对其余元素执行相同操作。所需的输出应该看起来像是在＆＃34;圆圈高度＆＃34;的div id内移动的橙色圆圈，并且在到达最后一个圆圈之后，第一个圆圈将从蓝色切换到橙色再次变为蓝色，并一遍又一遍地重复相同的过程。

我已经用Jquery和JS出了一个简单的代码来解决问题，如下所示：

var $divs = $(".circle");

function toggleColor(){

setInterval(function first_color(){
  $divs.css('background','blue')
  setTimeout(function changeColor() {
    for(var i = 0; i < $divs.length; i++){
      //do something to each div like
       $(this[i]).css('background','orange')
    }
  },1000)
  },2000
)}

toggleColor()

但是，如果我尝试通过$this[i]访问每个特定元素，则不会发生任何事情。控制台不会给我任何错误。我想知道这里出了什么问题？

Answer 1

我认为您正在尝试通过阅读帖子来执行此类操作（运行代码段），但我并非100％确定。如果您的意思是其他，请澄清。

＆＃13;

var $circles = $('.circle');
var i = 0;
setInterval(function () {
  $circles.removeClass('oj');
  $($circles[i]).addClass('oj');
  i++;
  if (i === $circles.length) i = 0;
}, 500);

＆＃13;

.circle{
 display: inline-block;
 width: 20px;
 height: 20px;
 background: blue;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 margin-top:10px;
 margin-left:10px;
 float:left
}

.oj {
  background: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "circle-height">
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
</div>

＆＃13;

Answer 2

更改此行

$(this[i]).css('background','orange')

到

 $(divs[i]).css('background','orange')

＆＃13;

var divs = $(".circle");

function toggleColor(){

setInterval(function(){
  divs.css('background','blue');
  setTimeout(function(){
    for(var i = 0; i < divs.length; i++){
      //do something to each div like
       $(divs[i]).css('background','orange')
    }
  },1000)
  },2000);
}

toggleColor();

＆＃13;

.circle{
background-color:blue;
height:150px;
width:150px;
border-radius:50%;

}
#circle-height{
height:300px;
width:300px;
border-radius:50%;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "circle-height">
 <span class="circle">ggg</span>
 <span class="circle"></span>
  <span class="circle"></span>
 <span class="circle"></span>
  <span class="circle"></span>
 <span class="circle"></span>
  <span class="circle"></span>
 <span class="circle"></span>
  <span class="circle"></span>
 <span class="circle"></span>
  <span class="circle"></span>
 <span class="circle"></span>
 
</div>

＆＃13;

Answer 3

var $divs = $(".circle");

function toggleColor(){

  // Get rid of function name here
  setInterval(function(){
    $divs.css('background','blue');

    // Get rid of function name here too
    setTimeout(function() {
      for(var i = 0; i < $divs.length; i++){
        // Use $divs instead of "this"
        $($divs[i]).css('background','orange')
      }
    },1000)
  },2000)
}

toggleColor();

Answer 4

你过度复杂化了。如果你想要水平动画，你可以用以下方式使用CSS3：

＆＃13;

#circle{
  position: relative;
  background-color:blue;
  height:200px;
  width:200px;
  border-radius:50%;
  margin: auto;
  overflow: hidden;
}

#innerCircle {
  position: absolute;
  top: 50%;
  display: block;
  height:20px;
  width:20px;
  margin-top: -10px;
  background: orange;
  border-radius:50%;
  animation: translateX 2s ease-in infinite;
}

@keyframes translateX {
    from {left: -20px;}
    to {left: 200px;}
}

＆＃13;

<div id="circle">
    <span id="innerCircle"></span>
  </div>

＆＃13;

希望这会有所帮助

循环使用相同类的每个div来一次更改颜色

4 个答案: