Question

我在js中非常新，我想学习它。我有一个例子用js / jQuery做这个，我真的不知道该怎么做。可以通过展示您的代码帮助我，并且我会观察并了解您是如何做到的。

我只有3个父块，每个块有5个子块。

您可以看到，有一个名为.left-arrow和.right-arrow的箭头。我想从第一个子块中删除类active，并通过单击active单击.right-arrow将类.left-arrow添加到第二个块，反之亦然。例如带缩略图的滑块。通过单击任何数字，例如2，我想将类.active添加到所有父块中的第二个块。

如果我的问题不明确，请原谅我。 JsFiddle Link

＆＃13;

* {
    margin: 0;
    padding: 0;
}
.first-line, .second-line, .line3 {
    margin-top: 20px;
}
.second-line, .line3 {
    margin-left: 20px;
}
.number, .anotherclass, .onemoreclass {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    border: 1px solid blue;
    text-align: center;
    margin: 0 10px;
}

.right-arrow, .left-arrow {
    display: inline-block;
    cursor: pointer;
}

.number.active, .anotherclass.active, .onemoreclass.active {
    background: blue;
    color: #fff;
}

＆＃13;

<div class="first-line">
    <div class="left-arrow"> << </div>
    <div class="number active">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
    <div class="number">4</div>
    <div class="number">5</div>
    <div class="right-arrow"> >> </div>
</div>
<div class="second-line">
    <div class="anotherclass active">1</div>
    <div class="anotherclass">2</div>
    <div class="anotherclass">3</div>
    <div class="anotherclass">4</div>
    <div class="anotherclass">5</div>
</div>
<div class="line3">
    <div class="onemoreclass active">1</div>
    <div class="onemoreclass">2</div>
    <div class="onemoreclass">3</div>
    <div class="onemoreclass">4</div>
    <div class="onemoreclass">5</div>
</div>

＆＃13;

Answer 1

将块级别类添加到DIV并将onClick事件添加到箭头中。

<div class="first-line">
  <div class="left-arrow" onclick="moveBlock('left');"> << </div>
  <div class="block1 number active">1</div>
  <div class="block2 number">2</div>
  <div class="block3 number">3</div>
  <div class="block4 number">4</div>
  <div class="block5 number">5</div>
  <div class="right-arrow" onclick="moveBlock('right');"> >> </div>
</div>
<div class="second-line">
  <div class="block1 anotherclass active">1</div>
  <div class="block2 anotherclass">2</div>
  <div class="block3 anotherclass">3</div>
  <div class="block4 anotherclass">4</div>
  <div class="block5 anotherclass">5</div>
</div>
<div class="line3">
  <div class="block1 onemoreclass active">1</div>
  <div class="block2 onemoreclass">2</div>
  <div class="block3 onemoreclass">3</div>
  <div class="block4 onemoreclass">4</div>
  <div class="block5 onemoreclass">5</div>
</div>

在javascript中初始化一个全局变量，用于跟踪选择的块。

var blockSelected = 1;

然后创建你的javascript / jQuery函数来处理箭头动作。

function moveBlock(direction){
if(direction=='right'){
    $(".active").removeClass("active");
    blockSelected = blockSelected +1;
    $(".block" + blockSelected).addClass("active");
}

if(direction=='left'){
    $(".active").removeClass("active");
    blockSelected = blockSelected -1;
    $(".block" + blockSelected).addClass("active");
}
}

的jsfiddle：

http://jsfiddle.net/js7rc01g/4/

js / jQuery相关的框

1 个答案: