Question

我正在处理投资组合页面的内容滑块。目标是根据您单击的按钮在“var state”中添加或减去1。

'var state'递增显示框1 - 6

问题1：一旦'var state'等于6，就没有方框7。如何将“var state”重新定义为1以重新启动旋转？
问题2：现在正好相反。如果'var state'等于1并且你单击下来，则没有框0.如何将'var state'重新定义为6？

var state = 1;
function currentState() {
    if(state <= 6){
        $("#example"+ state).addClass("selected").show()
        $(".example").not("#example"+ state).hide()
    }
}

.example{
    width: 200px;
    height: 50px;
    margin: 10px;
    background: #333;
    color: #FFF;
    font-size: 2em;
}
.hidden{
    display: none;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Answer 1

如果if语句超过6或低于1，则将其更改为eval：

var state = 1;
function currentState() {
  if (state > 6) {
    state = 1
  } else if (state < 1) {
    state = 6
  }
  $("#example" + state).addClass("selected").show()
  $(".example").not("#example" + state).hide()
}

.example {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #333;
  color: #FFF;
  font-size: 2em;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Answer 2

以下代码检查当前值是7（或更高）还是0（或更低），在这种情况下，该值分别重置为1或6。

var state = 1;
function currentState() {
if(state>=7) {
  state=1;
} else if (state<=0) {
  state=6;
} 

 if(state <= 6){
     $("#example"+ state).addClass("selected").show()
     $(".example").not("#example"+ state).hide()
  }
}

.example{
    width: 200px;
    height: 50px;
    margin: 10px;
    background: #333;
    color: #FFF;
    font-size: 2em;
}
.hidden{
    display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Answer 3

在将其用于课堂作业之前，您需要对其进行调整。

 if(state > 6) {
      state = 1;
 } else if(state < 1) {
      state = 6;
 }

 $("#example"+ state).addClass("selected").show()
 $(".example").not("#example"+ state).hide()

有人说过，如果您认为它有可能发生变化，我会使用变量作为最大值，否则您可能会在以后添加或删除其中一个框，并且您必须更正多个地方的数字。它可能很容易被忽视并破坏你的功能。

Answer 4

停止使用onClick并使用jQuery click方法注册事件侦听器以指定一个可以使用简单if语句的函数。

var state = 1;

function minus() {
  state -= 1;
  if (state < 1) {
    state = 6;
  }
  currentState();
}

function plus() {
  state += 1;
  if (state > 6) {
    state = 1;
  }
  currentState();
}

function currentState() {
  if (state <= 6) {
    $("#example" + state).addClass("selected").show()
    $(".example").not("#example" + state).hide()
  }
}

$("#up").click(plus);
$("#down").click(minus);

.example {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #333;
  color: #FFF;
  font-size: 2em;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="up">Up</button>
<button type="button" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Why you should not use onClick

如何将变量增加到6，然后将变量重新定义为1并继续？

4 个答案: