Нажимать разные данные в массив в зависимости от значения ползунка

У меня есть страница с некоторыми ползунками, которые производят некоторый код css: (Это генератор тени теней) У меня есть кнопка, которая добавляет полученный код в определенную область (#saved ul) и передает этот код в массив с именем used (я использую этот массив, чтобы проверить, добавил ли пользователь снова код в эту область. Если код существует в массиве, появится сообщение «Комбинация была использована»,) .Но сегодня я пришел к problem.As вы знаете окно тень имеет 2 способа быть применены:Нажимать разные данные в массив в зависимости от значения ползунка

боковик
врезке

Чтобы изменить способ применения теневой коробки, я использую слайдер. Если значение ползунка равно 0, оно будет открытым, иначе оно будет вставлено.

Теперь вернемся к моей проблеме. Когда пользователь захочет добавить код, который использовался снова, страница выдает сообщение (комбинация была использована). Но если пользователь меняет ползунок, чтобы выбрать тень вставки, которая отличается brom outset, сообщение появится снова. Это мой код:

$("#mark").click(function(){ 
     var marking=$("#x").val()+$("#y").val()+$("#blur").val()+$("#spread").val(); 
     if (marking==0){ 
      console.log("No code changed"); 
     } 
     else{ 

     var x=$("#x").val()+"px "; 
      var y=$("#y").val()+"px "; 
      var b=$("#blur").val()+"px "; 
      var s=$("#spread").val()+"px "; 
      $r=$("#red").val(); 
      $g=$("#green").val(); 
      $b=$("#blue").val(); 
      $color=" rgb("+$r+","+$g+","+$b+")"; 
      var finalCode=0; 
      if($("#blur").val()==0 && $("#spread").val()==0){ 
       finalCode=x+y; 
      } 
      else if($("#blur").val() != 0 && $("#spread").val()==0) { 
       finalCode=x+y+b; 
      } 
     if ($("#inset").val()==0) { 
      if (used.indexOf((finalCode+$color)) != -1){ 
       alert("That combination has been used"); 
      } 
      else{ 
      $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>"); 
      used.push(finalCode+$color); 
     } 

     } 
     else{ 
      if (used.indexOf((finalCode+$color)) != -1){ 
       alert("That combination has been used"); 
      } 
      else{ 
      $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>"); 

     } 
     } 
} 

    });

Любые идеи ???

источник

2014-12-10 stranger4js

Что вы получите с текущим подходом –

Как насчет связывания, если это вставка или outset с http://api.jquery.com/jquery.data/ к элементу li, а затем просто проверьте, используется ли он, и элемент имеет то же значение в/вне, что и у ползунка в настоящее время? – wawa

@wawa Можете ли вы дайте мне пример? – stranger4js

Я не тестировал его, но он должен работать следующим образом.

var used = { 
    inset : [], 
    outset : [] 
} 

$("#mark").click(function(){ 
    var marking=$("#x").val()+$("#y").val()+$("#blur").val()+$("#spread").val(); 
    if (marking==0) { 
     // make sure to remove this before publishing the app 
     console.log("No code changed"); 
    } else{ 
     var x=$("#x").val()+"px "; 
     var y=$("#y").val()+"px "; 
     var b=$("#blur").val()+"px "; 
     var s=$("#spread").val()+"px "; 
     $r=$("#red").val(); 
     $g=$("#green").val(); 
     $b=$("#blue").val(); 
     $color=" rgb("+$r+","+$g+","+$b+")"; 
     var finalCode=0; 
     if($("#blur").val()==0 && $("#spread").val()==0){ 
      finalCode=x+y; 
     } else if ($("#blur").val() != 0 && $("#spread").val()==0) { 
      finalCode=x+y+b; 
     } 
     if ($("#inset").val()==0) { 
      if (used.inset.indexOf((finalCode+$color)) != -1){ 
       alert("That combination has been used"); 
      } else{ 
       $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>"); 
       used.inset.push(finalCode+$color); 
      } 
     } else { 
      if (used.outset.indexOf((finalCode+$color)) != -1){ 
       alert("That combination has been used"); 
      } else{ 
       $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>"); 
       used.outset.push(finalCode+$color); 
      } 
     } 
    } 
});

При желании вы могли бы использовать для варов для вставки и боковик

var usedInset = []; 
var usedOutset = new Array(); 
// what ever you prefere 
[...] 
if ($("#inset").val()==0) { 
    if (usedInset.indexOf((finalCode+$color)) != -1){ 
     alert("That combination has been used"); 
    } else{ 
     $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>"); 
     usedInset.push(finalCode+$color); 
    } 
} else { 
    if (usedOutset.indexOf((finalCode+$color)) != -1){ 
     alert("That combination has been used"); 
    } else{ 
     $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>"); 
     usedOutset.push(finalCode+$color); 
    } 
}

Надеется, что это помогает (?:

источник

2014-12-12 09:39:37 wawa

Нажимать разные данные в массив в зависимости от значения ползунка

ответ

Смежные вопросы