Próbując stworzyć prosty suwak dla danych wejściowych.

Korzystanie z klejnotu ankiety, który dodaje dodatkowe pola. Dodałem do pytania klasę o nazwie „jSlider” i wyświetla ona suwak, ale nie aktualizuje danych wejściowych.

Wygenerowany formularz html:

<fieldset class="q_default jSlider" id="q_353" name="17) On a scale of 0 to 10, ...">
  <legend><span>17) On a scale of 0 to 10, ...</span></legend>
  <ol><span class='help'></span>
    <input id="r_18_question_id" name="r[18][question_id]" type="hidden" value="353" />
    <input class="" id="r_18_answer_id" name="r[18][answer_id]" type="hidden" value="3840" />
    <li class="string optional" id="r_18_string_value_input"><input id="r_18_string_value" maxlength="255" name="r[18][string_value]" type="text" /></li>
  </ol>
</fieldset>

Mój JS jest:

$(".jSlider").each(function(){
    var newSlider = '<div style="margin-top:20px;margin-bottom:20px;" id="slider">0</div><br />';
    $(this).append(newSlider);
    $("#slider", this).slider({
        value:0,
        min: 0,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
            alert(ui.value);
            // when append, it adds to the fieldset
            // first parent is the fieldset, next should be the ol, then the li 
            //       finally arriving at the input field
            $(this).parent().next("ol").next("li").next("input:text").val(ui.value);

                    }

    });

   });

EDYTOWAĆ

Proponowana zmiana mająca na celu ponowne naprawienie zduplikowanych identyfikatorów.

$(".jSlider").each(function(){
    var id = $(this).attr("id");
    var sliderID = id + "_slider";  
    alert(sliderID);
    var newSlider = '<div id="' + sliderID + '"></div><br />';
    $(this).append(newSlider);
    // or even
    // $(sliderID).slider({
    $(sliderID, this).slider({
        value:0,
        min: 0,
        max: 10,
        step: 1,
        change: function( event, ui ) {
               // alert(ui.value);
                // when append, it adds to the fieldset
                // first parent is the fieldset, next should be the ol, then the li 
                //       finally arriving at the input field
                $(this).closest('fieldset').find('input:text').val(ui.value);

                        }

    });

   });
0
pcasa 24 lipiec 2011, 23:28
Pochodzi z generatora formularzy, nie ze mnie.
 – 
pcasa
25 lipiec 2011, 00:30
Nie ma znaczenia. Nie są dozwolone i najprawdopodobniej coś psują. Musisz naprawić swój generator formularzy, jeśli używa tego samego identyfikatora dwa razy. Mówiłem jednak o <div id="slider">, który nie wygląda na wygenerowany...
 – 
ThiefMaster
25 lipiec 2011, 01:11
Masz rację, to pochodzi ode mnie. Zredagowałem pytanie, pokazując, jak PRÓBOWAŁEM to poprawić, ale to nie zadziałało. Może czegoś mi brakuje? jQuery nie jest moją mocną stroną.
 – 
pcasa
25 lipiec 2011, 02:03

2 odpowiedzi

Najlepsza odpowiedź

Możesz zrobić (powinieneś użyć zdarzenia stop lub zdarzenia zmiany):

    stop: function( event, ui ) {
        alert(ui.value);
        // when append, it adds to the fieldset
        // first parent is the fieldset, next should be the ol, then the li 
        //       finally arriving at the input field
        $(this).closest('fieldset').find('input:text').val(ui.value);

                }
0
Nicola Peluchetti 25 lipiec 2011, 00:03
Dzięki, czy mogę zapytać, dlaczego kolor tła się nie wypełnia? Jeśli dodam suwak do div już istniejącego na stronie, działa on poprawnie, ale kiedy dodam go w ten sposób, nie aktualizuje koloru tła.
 – 
pcasa
25 lipiec 2011, 00:59

Aby zaktualizować pole:

$('input#myfield').val($('#slider').slider("option", "value"));

Skrypt generuje zduplikowane identyfikatory (nowy identyfikator #suwak w każdej pętli). Użycie $(this) zapobiegnie niewłaściwemu działaniu skryptów:

$('.jSlider').each(function(){
    $(this).slider({..});
};

EDYCJA 28.7.: za pomocą var $newSlider, która rozszerza var newSlider, dzięki czemu można użyć funkcji $.slider():

$(".jSlider").each(function(){
   var $newSlider = $('<div id="' + $(this).attr("id") + '">');
   $(this).append($newSlider);
   $newSlider.slider(options);});

$.append() akceptuje definicję elementu HTML, nie są wymagane żadne znaczniki zamykające.

0
mckoch 28 lipiec 2011, 20:04