2013-11-25 2 views
0

평가 양식을 작성하려고하는데 JQuery UI 증분 슬라이더를 사용하고 싶습니다. 값을 숫자로 사용하지 않으려면 "좋음"또는 "bad"숫자가없는 JQuery UI 슬라이더

나는 JavaScript 또는 JQuery를 사용하지 않고 CSS & HTML로 훌륭하다. 다음 달 뉴욕에있는 강좌를 통해이 언어들에 더 능숙해질 수있게 도와 줄 것입니다. 그 사이에 모든 도움이 인정됩니다. 내가 찾은 다른 스크립트를 해킹하려했지만 문제가 계속 발생했습니다. 증분이 #s를 표시하는 것을 제외하고는 내가 원하는 것에 가깝게이 스크립트를 실행했습니다.

나는이 코드가 내가 원하는 것을 쉽게 수정할 수있는 것처럼 느낀다.

http://jsfiddle.net/dmcgrew/EquTn/3/

<html> 

<div class="kpa_rate kpa_rate1"> 
    <label for="kpa1_rating_value">Parking:</label> 

    <div id="1" class="slider"></div> 
    <input type="text" class="kpa1_rating_value" name="kpa1_rating" value="0" />  
</div> 




<div class="kpa_rate kpa_rate2"> 
    <label for="kpa2_rating_value">Entrance:</label> 

    <div id="2" class="slider"></div> 
    <input type="text" class="kpa2_rating_value" name="kpa2_rating" value="0" /> 
</div> 



</html> 

자바 스크립트는

<script> 
$(function() { 
       $(".slider").slider({ 
        range: "max", 
        min: 0, 
        max: 5, 
        value: $("input", this).val(), 
        slide: function(event, ui) {      
        //get the id of this slider 
        var id = $(this).attr("id"); 
        //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
        $("span[class*=" + id + "]").text(ui.value); 
        $("input[class*=" + id + "]").val(ui.value); 
        } 
       }); 
       }); 
</script> 
+0

를 _ "나는 값이 숫자 싶지 않아, "great"또는 "bad"와 같은 말을하고 싶습니다. "_ 텍스트를 값에 매핑하는 배열을 만드는 것으로 시작합니다. – j08691

+0

배열을 찾아서 매핑하고 있습니다. 이해가 가지 않습니다. . 자신에게 자바 스크립트를 가르치려고 노력하고 CodeAcademy를 ​​체크 아웃하려고했습니다. 나는 결국 수업에 가입하고 방금 등록했습니다.이 코스를 통과하면 장애물을 통과하는 데 도움이 될 수 있습니다. – user2984539

+0

사용하려는 텍스트 값은 무엇입니까? 그리고 나쁜)? – j08691

답변

0

은 당신이 원하는나요 서로 다른 각각의 값에 대한 단어 ("훌륭한, 좋은, 중립 등"), 또는 끝에서 나쁜/단지 좋은?

5 가지 값 각각에 대해 diff 단어를 사용하려면 j08691에서 설명한 것처럼 원하는 색인에 원하는 단어가있는 배열을 만듭니다.

다음은 .val (ui.value)의 ui.value를 값 배열 (Arr [ui.value])으로 바꿉니다. (실제로 "span"부분이 필요할지 모르겠지만 jquery를 사용하지 않으므로 잘 모르겠습니다).

$(function() { 
     var Array = ["die","very bad", "bad", "neutral","good","great"]; 
      $(".slider")...etc 
          ... 
$("input[class*=" + id + "]").val(Array[ui.value]); 

이것은 나를 위해 일했습니다.

나는 약간의 조작을 했으므로 문제를 표면적으로 해결할 방법을 찾은 것 같습니다. 첫 번째 값으로 입력 된 숫자는 슬라이더 버튼/물건에 영향을 미치지 않으므로 슬라이더에 표시해야하는 첫 번째 단어를 넣으십시오 (제 경우에는 "죽습니다"). // 값이 여기에 숫자와 일치하지 않습니다

다음 코드에서 입력을 [입력]으로 변경하면 모든 설정이 완료됩니다! 분 : 0, 최대 : 5, 값 :. $ ("배열 [입력]"

내가이 당신을 위해 충분히 잘 작동 희망

+0

감사합니다. 최선을 다하겠습니다. 슬프게도, 저는 JavaScript를 잘 못합니다. 그러므로 나는 왜 계속해서 다음 달 수업에 출석을하고 있죠. 여러분의 모든 도움을 진심으로 감사드립니다. – user2984539

+0

감사합니다! 잘됐다. 내가 할 수 있다고 생각하지 않았지만 당신의 도움으로 효과가있었습니다. 매우 감사. – user2984539

+0

문제가 있습니다. 나는 나타나는 단어를 얻을 수 있었지만 지금은 초기에 나타난 값이 숫자입니다. 내가 말하는 코드를 변경하려고했는데, value = "2"였지만 슬라이더가 작동하지 않습니다. 어떤 아이디어? – user2984539