슬라이더의 값에 따라 배열에 다른 데이터 푸시

Question

일부 CSS 코드를 생성하는 슬라이더가있는 페이지가 있습니다. (상자 섀도우 생성기) 생성 된 코드를 특정 영역에 추가하는 버튼이 있습니다 #saved ul)을 호출하고 해당 코드를 used라는 배열에 전달합니다.이 배열을 사용하여 사용자가 해당 영역에 코드를 다시 추가했는지 확인합니다. 배열에 코드가 있으면 "조합이 사용되었습니다") 나누었다 오늘 내가 알고있는 problem.As에 와서 상자 그림자 적용하는 2 가지 방법이 있습니다

1. 처음을
2. 삽입

상자 그림자가 적용되는 방식을 변경하려면 slider를 사용합니다. 슬라이더의 값이 0이면 삽입되지 않습니다.

이제 다시 내 문제로 돌아갑니다. 사용자가 페이지를 다시 사용하는 코드를 추가하도록 선택하면 (조합이 사용되었습니다). 그러나 사용자가 슬라이스를 변경하여 다른 삽입 된 그림자를 선택하면 브롬 초기 메시지가 다시 나타납니다. 내 코드는 다음과 같습니다.

$("#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>"); 

     } 
     } 
} 

    }); 

어떤 아이디어 ???

Answer 1

테스트하지는 않았지만 이렇게 작동해야합니다. 당신은 당신이 삽입을 위해 바르하기 위해 사용이 도움이

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); 
    } 
} 

희망을 착수 할 수 원하는 경우

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); 
      } 
     } 
    } 
}); 

(?

그것은 삽입 당신이 현재의 접근 방식 거죠