切换＆＃34; addClass＆＃34;连续3个div

Question

这是我的HTML：

<h1>hello world</h1>

<h1>this is a hello world page</h1>

Hello world everyone

点击div＆＃34;按钮＆＃34;，我想添加课程＆＃34; active＆＃34;到了第一个带有类名＆＃34;框＆＃34;的div。如果我再次点击该按钮，我想删除该课程＆＃34; active＆＃34;从方框1开始，将其添加到方框2. Aso。

稍后，如果框3具有添加的类名＆＃34;活动＆＃34;然后按div＆＃34;按钮＆＃34;再次，它应该从头开始。

我尝试这样的事情，但它失败了：

<div class="button"></div>
<div class="wrapper>
  <div class="something">Hello</div>
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
</div>

Answer 1

您需要在jquery

上使用css :eq()选择器或.eq()

＆＃13;

＆＃13;

$(document).ready(function(){
  var index = 0; // define index for the first box
  $('.button').on('click',function(){
    $('.wrapper .box').removeClass('active');   // remove class active from all box divs
    $('.wrapper .box:eq('+index+')').addClass('active');  // add class active to the box index we need
    index = (index < $('.wrapper .box').length - 1) ? index +1 : 0;  // if index = the number of box divs add + 1 if not return it back to 0
  }).click(); // if you need to run it onload add .click()
});

＆＃13;

.active{
  background : red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click</div>
<div class="wrapper">
  <div class="something">Hello</div>
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试这样的事情：

＆＃13;

＆＃13;

include CarrierWave::MiniMagick
require 'carrierwave/processing/mini_magick'
version :thumb do
 process :resize_to_fit => [600, 450]
end

＆＃13;

jQuery(".button").click(function(){
   var active =  jQuery(".wrapper").children(".active").first();

   if (!active.length)
    jQuery(".wrapper").children(":first").addClass("active");
   else{ 
     active.removeClass("active");  
     if (active[0] != jQuery(".wrapper").children(":last")[0])
       active.next().addClass("active");
     else
       jQuery(".wrapper").children(":first").addClass("active");
   }
});

＆＃13;

.button {
  width: 150px;
  height: 50px;
  cursor: pointer;
  background-color: blue;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 0.5px;
  border-radius: 9px;
  position: relative;
  left: 30%;
}

.wrapper {
  margin-top: 20px;
  margin-left: 30px;
  background-color: white;
  width: 450px;
  height: 550;
  text-align: center;
  border-style: dashed;
}
.active {
  background-color: grey;
}
.something {
  margin-bottom: 8px;
  margin-top: 8px;
}

.box {
  margin-bottom: 8px;  
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

生成器功能的一些乐趣：）

＆＃13;

＆＃13;

let box = 0;

$('.button').on('click', function() {
	const boxes = document.querySelectorAll('.box'); // get all boxes
	let iter = activateBox(box, boxes); // create itarator to go over boxes
	
	$('.box').removeClass('active'); // remove any active class from all boxes
	
	iter.next(box++).value.classList.add('active'); // add active class to the next box in line
	if (box === boxes.length) box = 0; // reset counter if last box reached
});

function* activateBox(i, boxes) {
	yield boxes[i];
}

＆＃13;

body {
  font-family: 'Arial', sans-serif;
}

.button {
  display: inline-block;
  padding: 8px;
  border: 2px solid lightblue;
  border-radius: 4px;
  color: #444;
  cursor: pointer;
  transition: background .15s ease-out;
}

.button:hover {
  background: lightblue;
  color: #FFF;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100px;
  background: #FFF;
  margin: 8px 0;
  border: 2px solid lightblue;
  border-radius: 4px;
}

.box.active {
  background: lightblue;
  color: #FFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Apply Active</div>
<div class="wrapper">
	<div class="box one">Box 1</div>
	<div class="box two">Box 2</div>
	<div class="box three">Box 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;