"data- *"및 JQueryUI 슬라이더 사용

Question

사용자가 슬라이더를 호출하여 이미지 모양을 변경할 수있는 페이지가 있습니다. 하나의 슬라이더가 표시되지만 총 10 개의 슬라이더 만 표시됩니다. 각각에 대해 js 함수를 작성하는 대신 HTML5 data- 변수를 사용하여 간소화하려고합니다.

<div class="editSliderHolder" id="brightness"> 
    <label>Brightness</label> 
    <div class="editSlider" data-minVal="-20" data-maxVal="20" data-editValue="curValB"></div> 
</div> 

<div class="editSliderHolder" id="contrast"> 
    <label>Contrast</label> 
    <div class="editSlider" data-minVal="-40" data-maxVal="40" data-editValue="curValC"></div> 
</div> 

그리고 JQuery와 내가 노력하고있어 :

$(document).ready(function() { 
     var div = $("div.editSlider"); 
     div.slider({ 
      value: 0, 
      min: div.data("minVal"), 
      max: div.data("maxVal"), 
      slide: function (event, ui) { 
       //alert(min); // check if value set 
       div.data("editValue", ui.value); 
       $(this).find('.ui-slider-handle').text(Math.round(ui.value)); 
      }, 
      stop: function(event, ui) { 
       div.data("editValue", ui.value); 
       Caman('#capEdit', function() { 
        this.revert(); // restore canvas 
        this.contrast(curValC); // add contrast 
        this.brightness(curValB); // add brightness 
        this.render(); // render it 
       }); 
      } 
     }); 
    }); 

그래서 어떤 일이 발생

이며, 최소 및

이

는 한 눈에 보이는 한 번에 두 슬라이더의 HTML입니다 최대 값은 각 슬라이더에 설정되며 ui.value는 어떤 효과를 변경할지 결정합니다. 즉,이 경우에는 밝기 또는 대비입니다.

아무런 값도 설정되지 않았으며 그 이유에 대해서는 알지 못합니다. 이 작업을 수행하는 더 좋은 방법이 있습니까? 아니면이 코드가 잘못 되었습니까?

Answer 1

에 대해 반복하십시오.이 문제는 .data() 속성을 선택하는 방법 인 것 같습니다. 만약 당신이 console.log이라면 그것들은 camelCase가 아니라 소문자로 쓰여 있음을 알게 될 것입니다. editSlider 클래스를 사용하여 각 div에 대한 슬라이더를 만들려면 .each() 루프가 필요합니다.

console.log(div.data()); 
//outputs 
Object {minval: -20, maxval: 20, editvalue: "curValB"} 

그래서 당신은 HTML에서의 camelcase로 쓸 수 있습니다 (일반 for 루프도 가능) (하지만해야되지 않음) jQuery를 소문자로 액세스합니다.

볼이 MDNdata-* attributes 사양에 따라 jsfiddle

$(document).ready(function() { 
    var div = $("div.editSlider"); 
    div.each(function() { 
     $(this).slider({ 
      value: 0, 
      min: $(this).data("minval"), 
      max: $(this).data("maxval"), 
      slide: function (event, ui) { 
       //alert(min); // check if value set 
       $(this).data("editvalue", ui.value); 
       $(this).find('.ui-slider-handle').text(Math.round(ui.value)); 
      }, 
      stop: function (event, ui) { 
       $(this).data("editvalue", ui.value); 
       /* Caman('#capEdit', function() { 
        this.revert(); // restore canvas 
        this.contrast(curValC); // add contrast 
        this.brightness(curValB); // add brightness 
        this.render(); // render it 
       }); 
       */ 
      } 
     }); 
    }); 
}); 

:

* 표시는 다음 제한 XML 이름의 생산 규칙 다음 어떤 이름으로 대체 할 수있다 :

• mu st는 xml로 시작하지 않습니다.이 경우에 사용 된 문자는 무엇이든간에 문자입니다.
• 이름에는 세미콜론 (U + 003A)을 포함 할 수 없습니다.
• 이름에는 대문자 A ~ Z 문자가 없어야합니다. 여기

(기본적으로 같은 말을)를 W3C specs에 대한 링크

Answer 2

div에는 div 컬렉션이 포함되어 있으므로 div.data("minVal")은 원하는 것을 반환하지 않습니다. 현재 div의 minVal을 원한다. $(this).data("minVal")을 시도 할 수 있지만 this이 현재 인스턴스로 설정되어 있는지 확실하지 않습니다. maxVal 및 editValue

Answer 3

사용중인 JQuery와의 버전? jQuery를 1.5에서 언급 한 here

변경 등

.6 데이터 속성이 이제

JQuery documentation를 소문자로 강제 의미, 임베디드 대시 속성의 치료가 jQuery를 1.6 변경되었습니다

는 W3C의 HTML5 사양을 준수 상태.

그래서 당신을위한 가장 좋은 방법은 마크 업 대시의 속성을 정의하는 것입니다

<div class="editSlider" data-min-val="-20" data-max-val="20" data-edit-value="curValB"></div> 

을 분리하고, 스크립트에서

... 
min: div.data("minVal"), 
max: div.data("maxVal"), 
...