js/j查询依赖框

js/jQuery dependent boxes

本文关键字：依赖 查询 js      更新时间：2023-09-26

我对js非常陌生，我想学习它。我有一个用js/jQuery做这件事的例子，但我真的不知道该怎么做。也许你可以通过展示你的代码来帮助我，我会观察并理解你是怎么做的。

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

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

如果我的问题不清楚，请原谅我。JsFiddle Link

* {
    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;
}
<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>

将块级类添加到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/

相关文章：