Question

我正在尝试创建一个简单的菜单，您可以在其中选择菜单本身的背景颜色，我将选项加载到字符串数组中。

为了浏览选项，我使用了两个不同类的元素，.rest和plus。两者都可以浏览上一个和下一个可用选项。

问题：它只运行一次，我点击.plu并显示＆＃34; verde＆＃34;或绿色，nextcolor值。如果我再次按加号它不会显示下一个值，它会保持这样。我无法再回到以前的颜色了。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
$(document).ready(function(){
colores = ['amarillo', 'verde', 'rosa', 'naranja', 'purpura'];
var i = 0;
$('.colorines').text(colores[i]);

$('.rest').click(function () {
colores[i] = colores[i - 1];
$('.colorines').text(colores[i]);
});

$('.plus').click(function () {
colores[i] = colores[i + 1];
$('.colorines').text(colores[i]);
alert('next color');
});


});

＆＃13;

.postit {
  position:absolute; 
  overflow:hidden;
  left:1070px; 
  top:-140px; 
  padding-left:10px;
  line-height: 1;   
  width: 275px;    
  margin: 0px;    
  min-height:250px;
  max-height:250px;
  padding-top:35px; 
  border:1px solid #E8E8E8;  
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: #ffff88; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
  background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C #A3FF87 #CFFFC7*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
 
.postit:after {     
  content: "";
  position:absolute; 
  z-index:-1;
  right:-0px; 
  bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
  -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

.settingswheel{
	position:absolute; 
	bottom:32px; 
	right:15px; 
	cursor:pointer;
	z-index:10001;
	-moz-transition: transform 2.5s;
    -webkit-transition: transform 2.5s;
    transition: transform 2.5s;
}

.settingswheel:hover{
  transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.settingsin{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive;  display:flex; justify-content:flex-start; align-items:center; height:110px; width:200px;  background-color:rgb(255, 255, 136); position:absolute; bottom:0px; left:5px; transition: all 1.5s ease;}
.settingsout{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive;  display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:0px; left:-202px; transition: all 1.5s ease;}

.menu{
	list-style:none; 
	bottom:3px; 
	position:absolute; 
	font-family: 'Covered By Your Grace', cursive; 
	font-weight:300; 
	width:200px;
	z-index:1;
}

.menu  li{font-size:21px; margin-top:5px;}

＆＃13;

<div class="postit">
  <ul class="menu">
    <li><span data-es="Pantalla completa: " data-en="Full screen: "></span><span data-es="si" data-en="yes"></span></li>
	<li><span data-es="Idioma: " data-en="Language: "></span><span class="la" style="cursor:pointer;" data-es="ingles" data-en="english"></span></li>
	<li><span data-es="Diapositivas: " data-en="Slideshow: " ></span><span>< </span><span>3s</span><span> ></span></li>
	<li><span data-es="Color postit: " data-en="Postit color: "></span ><span class="rest" style="cursor:pointer;">< </span><span class="colorines"></span><span class="plus" style="cursor:pointer;" > ></span></li>
  </ul>
</div>

＆＃13;

Answer 1

你没有增加＆＃34;我＆＃34;随时。所以请在执行时加上它。而不是使用colores [i] = colores [i + 1];它会使你的colores数组有重复的元素。

Answer 2

您应该通过i或--递减/递增++的值。设置一些条件来检查你没有超过/低于你的数组索引也是一个好主意：

$(document).ready(function() {
  colores = ['amarillo', 'verde', 'rosa', 'naranja', 'purpura'];

  var i = 0;

  $('.colorines').text(colores[i]);

  $('.rest').click(function() {
    if (i === 0) {
      return;
    } else {
      $('.colorines').text(colores[--i]);
    }
  });

  $('.plus').click(function() {
    if (i === colores.length - 1) {
      return;
    } else {
      $('.colorines').text(colores[++i]);
      alert('next color');
    }
  });
});

导航我的javascript数组

2 个答案: