нельзя ссылаться на слайдер, используя $ (this) внутри $ (). slider ({})? - PullRequest
Новая
       33

нельзя ссылаться на слайдер, используя $ (this) внутри $ (). slider ({})?

0 голосов
/ 15 февраля 2012

скажем, у меня есть jQuery UI Slider примерно так: 

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

Допустим, у меня есть динамический ввод текста рядом с моим ползунком, чтобы показать значение моего ползунка, например, так: 

<input id="slider-value" type="text" value="7" style="text-align: center;">

Таким образом, полный код моего слайдера: 

<p>
<div id="slider-value" class="mySlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<input id="slider-value" type="text" value="7" style="text-align: center;">
</p>

Как вы можете видеть, изначально, когда страница загружается, мой слайдер имеет значение 7. Также,входной текст, который показывает значение моего слайдера, имеет тот же идентификатор, что и сам мой слайдер div.Я хочу, чтобы маркер ползунка отображал это значение при загрузке страницы.Если я установлю атрибут значения ползунка равным 7 следующим образом: 

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: 7, // value of the slider handle
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

Это прекрасно работает, но, очевидно, это не лучший способ, потому что значение ползунка извлекается из базы данных.и может измениться (это может быть 1, 8, 4, 6 и т. д.).

Теперь, если я попытаюсь сделать что-то вроде: 

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

По какой-то причине этоне работает.Дескриптор не показывает значение.Что я делаю не так ?, Это потому, что я не могу использовать $ (this) внутри $ (). Slider ({})?

Пожалуйста, дайте мне знать, почему это не работает

Спасибо

Ответы [ 3 ]

2 голосов
/ 15 февраля 2012

Что здесь this? Не думайте, что он будет указывать на .mySlider, потому что вы просто создаете конфигурацию и отправляете ее в качестве аргумента в плагин слайдера, слайдер еще не инициализирован. Попробуйте это. 

var $mySlider = $(".mySlider");
$mySlider.slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $mySlider.next('input').val(),
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

В качестве стороны не идентификаторы должны быть уникальными на странице. Вы можете использовать метод val() для получения значения из элемента ввода вместо attr("value").

Отредактировал мой ответ на основе ваших правок (добавлена ​​разметка). Использовал next() метод, чтобы найти непосредственный ввод (брат) .mySlider и получить значение.

Обновление: Для нескольких слайдеров используйте этот код 

$(".mySlider").each(function(){
    var $this = $(this);
    $this.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $this.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});
0 голосов
/ 15 февраля 2012

На основе сообщения @ShankarSangoli: 

var $mySlider = $(".mySlider");
$mySlider.each(function() {
    var $slider = $(this);
    $slider.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $slider.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});

вы берете каждый .mySlider и добавляете плагин и сохраняете его как $slider, чтобы получить его значение.

0 голосов
/ 15 февраля 2012

@ Ответ ShankarSangoli действительно адрес как исправить это, но я думаю, что вы спросили почему .

Чтобы ответить на вопрос, почему this необратитесь к ползунку, посмотрите, как вы создаете этот вызов функции. 

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

Но давайте заменим имена и детали на более простые вещи: 

object.method({
    value: this.function().otherFunction()...;
});

Этотак же, как 

var params = {
    value: this.function().otherFunction()...;
};
object.method(params);

Как уже указывалось, this не относится к объекту слайдера, поэтому сначала нужно создать ссылку на слайдер.this относится к самой последней включающей области действия - в данном случае это анонимный объект {}, который вы создаете для передачи параметров для вызова метода .slider.

Hopeэто помогает.

...