ООП. Как в классе сделать обработчик события для тэга в виде метода будущего объекта?

@Kot137 · Регистрация: 14.05.2016

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Помогите разобрться. Я в PHP вывожу в цикле однотипные группы тэгов, к каждой группе привязываю объект JS - обработчик событий в этой группе. Объект описан типа класа. При создании экземпляра объекту передается его ID, в объекте есть метод, который во время инициализации объекта вешатся на обработчик событий тэга, однако при возникновении события метод не видит параметров своего объекта. Я подозреваю, что создается новый экземпляр метода не связанный с объектом...

Зделал подобие класса в виде:

Javascript

function prop_int_class (ii){
  this.id=ii;
  // Обработчик событий
  this.iev=function(x,y){
    if ((x==1)&&(y='min')) alert(this.id);
  }
  // Установка: вешаем события на тэги
  this.ini=function(){
    $("#teg"+this.id).bind(click, {fu: this.iev }, function(event){ event.data.fu(1, "min");});
  }
  this.ini();
}

При создании страницы, после прорисовки каждого тэга №i создается и инициализируется объект:

PHP

1	echo "<script>var pio$i=new prop_int_class($i);</script>";

Во время инициализации и при "ручном" вызове метода, значение this.id - выдает заданное значение. Но при срабатываении события - click получаю ошибку: значение this.id - undefined. Может как-то по другому можно повесить метод на событие?

@Padimanskas · 29.05.2016, 13:01

Сообщение от Kot137

echo "<script>var pio$i=new prop_int_class($i);</script>";

нельзя генерить скрипты из php. Узнай что такое передача репрезентативного состояния.

@Kot137 · 29.05.2016, 13:49 **[ТС]**

Сообщение от Padimanskas

нельзя генерить скрипты из php..

Почему? Из-за того, что может быть JS еще неподгружен?

PHP

1	echo "<script>$(document).ready(function() { var pio$i=new prop_int_class($i);});</script>";

- так тоже самое.

Сообщение от Padimanskas

Узнай что такое передача репрезентативного состояния.

"это стиль постро*е*ния архи*тек*туры рас*пре*де*лен*ного кли*ент-сер*вер*ного при*ло*же*ния, кото*рый упро*щает роутинг и постро*е*ние API." - причем здесь это?

@Padimanskas · 29.05.2016, 14:31

Сообщение от Kot137

Почему? Из-за того, что может быть JS еще неподгружен?

Сообщение от Kot137

"это стиль постро*е*ния архи*тек*туры рас*пре*де*лен*ного кли*ент-сер*вер*ного при*ло*же*ния, кото*рый упро*щает роутинг и постро*е*ние API." - причем здесь это?

господь милосердный

@dzendev · 29.05.2016, 17:15

2 Ошибки
1. Обработчик события неверно прикреплён:
.bind(click, - должно быть с кавычками .bind('click',
2. Вызов метода объекта приведет к ошибки

Javascript

1
2
3

this.iev=function(x,y){
    if ((x==1)&&(y='min')) alert(this.id); // alert undefined
}

Для this нужно явно указать контекст и здесь есть 2 варианта

Javascript

1
2
3

this.iev=function(x,y){
  if ((x==1)&&(y='min')) alert(this.id);
}.bind(this);

или
var self = this;

Javascript

1
2
3

this.iev=function(x,y){
  if ((x==1)&&(y='min')) alert(self.id);
}

Вот полностью код

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery.js"></script>
    <script>
        function prop_int_class (ii){
          this.id=ii;
          // Обработчик событий
         /* this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(this.id);
          }.bind(this);*/
          var self = this;
          this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(self.id);
          }
          // Установка: вешаем события на тэги
          this.ini=function(){
            $("#teg"+this.id).bind('click', {fu: this.iev }, function(event){ 
                event.data.fu(1, "min");
            });
          }
          this.ini();
        }
    </script>
    
</head>
<body>
    <div id="teg1">click</div>
    <div id="teg2">click</div>
    <?php
        $i = 1;
        echo "<script>var pio$i=new prop_int_class($i);</script>";
    ?>
</body>
</html>

@Kot137 · 29.05.2016, 19:27 **[ТС]**

Сообщение от dzendev

var self = this;

Огромное Вам спасибо за адекватный ответ!
После явного указания this - все заработало!

@Fedor Vlasenko · 29.05.2016, 19:32

Сообщение от Padimanskas

нельзя генерить скрипты из php. Узнай что такое передача репрезентативного состояния.

здесь мы просто хороним JSONP

@Kot137 · 29.05.2016, 19:56 **[ТС]**

Сообщение от dzendev

или
var self = this;

Хотя нет. Такой подход - копирует параметры объекта в моменте, но при срабатывании событий функция не имеет доступа к актуальным параметрам, она видит те, которые были на момент назначения... ((

@dzendev · 29.05.2016, 19:59

Сообщение от Kot137

Хотя нет. Такой подход - копирует параметры объекта в моменте, но при срабатывании событий функция не имеет доступа к актуальным параметрам, она видит те, которые были на момент назначения... ((

Код киньте

@Kot137 · 29.05.2016, 20:14 **[ТС]**

Нашел не самое красивое решение: если назначение обработчиков событий вынести из объекта в скрипт PHP.

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery.js"></script>
    <script>
        function prop_int_class (ii){
          this.id=ii;
          // Обработчик событий
          this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(this.id);
          }.bind(this);*/
          this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(this.id);
          }
        }
    </script>
    
</head>
<body>
    <div id="teg1">click</div>
    <div id="teg2">click</div>
    <?php
        $i = 1;
        echo "<script>var pio$i=new prop_int_class($i);";
        echo "$('#teg$i').bind('click',  function(){ pio$i.iev(1,'min');});</script>";
    ?>
</body>
</html>

Добавлено через 7 минут

Сообщение от dzendev

Код киньте

вот как это изначально предполагалось:

Javascript

function prop_int_class(ii){ // Типа класс обработки инпутов и ползунка свойства INT фильтра +++++++++++++++++++++++++++++++++++++++++++
    
    // Инициализация
    this.id=ii;
    this.active_min=false;
    this.active_max=false;
    this.active_range=false;
    this.active_submit=false;
    this.range=""; // ""/min/max
    this.focus_min=false;
    this.focus_max=false;
    this.focus_range=false;      
 
    this.iev=function(x,idd){
        // Основная функция объекта
        // Получаем название блока
        var ids;
        if (idd=="min") ids="pro_input_min_"+this.id;
        if (idd=="max") ids="pro_input_max_"+this.id;
        if (idd=="range") ids="pro_input_range_"+this.id;
        
        if (x==0){ // Клик на основное поле min или max
            // Установим активности +++++++++++++++++++++++++++++++
            this.active_min=(idd=="min");
            this.active_max=(idd=="max");
            $("#"+ids).css("background-color","#ffd1b5"); // Подсветка
            //+++++++++++++++++++++++++++++++++++++++++++++++++++++
            
            // Если ползунок этого вида уже есть - то прячем его
            if ((this.range==idd)&&this.active_range){ // отрабатывается в потере фокуса
                //this.active_range=false;
                //$("#pro_td_range_"+this.id).hide();                
            } else{ // Если нет, то прорисовываем
                this.active_range=true;
                $("#pro_td_range_"+this.id).show();
                $('#pro_input_range_'+this.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+this.id).value=document.getElementById(ids).value;
                this.ini("range"); // Возвращаем прослушку событий
            }
        }
        
        if (x==1){ // Измененение
            if (!this.active_submit) { // Рисуем кнопку ПРИМЕНИТЬ
                this.active_submit=true;
                $("#pro_td_apply_"+this.id).show();
            }
            if (idd=="range"){ // Дернули ползунок
                this.focus_range=true;                
                // Клонируем новое значение в инпут
                if (this.active_min) $("#pro_input_min_"+this.id).unbind();
                if (this.active_max) $("#pro_input_max_"+this.id).unbind();
                document.getElementById(ids).value=document.getElementById('pro_input_range_'+this.id).value;
                if (this.active_min) this.ini("min");
                if (this.active_max) this.ini("max");
            } else{ // Изменили ручками в инпуте
                this.active_range=true;
                $("#pro_td_range_"+this.id).show();
                $('#pro_input_range_'+this.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+this.id).value=document.getElementById(ids).value;
                this.ini("range"); // Возвращаем прослушку событий                
            }            
        }
        
        if (x==2){ // Потеря фокуса
            if (idd=="range"){ // если ползунок потерял фокус - то прячем его
                this.focus_range=false;
                this.active_range=false;
                $("#pro_td_range_"+this.id).hide(); 
                // Если фокус не появился на активном инпуте - то снимаем активность
                setTimeout(function () {
                    if (!this.active_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            } else{
                // Если фокус теряет инпут и при этом не на ползунок, то надо снимать активность
                this.focus_min=!(idd=="min");
                this.focus_max=!(idd=="max");
                setTimeout(function () {
                    if (!this.focus_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            }
        }
        
        if (x==3){ // Получение фокуса
            this.active_min=(idd=="min");
            this.focus_max=(idd=="max");
            this.focus_range=(idd=="range");
        }
    }
    
    // Начальная установка событий на мин и мах
    this.ini=function(z){
        // if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('click', this.iev(0, "min"));
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('click', {fu: this.iev }, function(event){ event.data.fu(0, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('click', {fu: this.iev }, function(event){ event.data.fu(0, "max");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('change', {fu: this.iev }, function(event){ event.data.fu(1, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('change', {fu: this.iev }, function(event){ event.data.fu(1, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+this.id).bind('change', {fu: this.iev }, function(event){ event.data.fu(1, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('blur', {fu: this.iev }, function(event){ event.data.fu(2, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('blur', {fu: this.iev }, function(event){ event.data.fu(2, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+this.id).bind('blur', {fu: this.iev }, function(event){ event.data.fu(2, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('focusin', {fu: this.iev }, function(event){ event.data.fu(3, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('focusin', {fu: this.iev }, function(event){ event.data.fu(3, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+this.id).bind('focusin', {fu: this.iev }, function(event){ event.data.fu(3, "range");});
        // alert(this.id);
    }    
    this.ini("all"); // Инициализация при первом вызове 
}

PHP

foreach  ($prd_propers as  $tmp_prop){ 
                // Получаем данные по свойству
                $prop_type=$m->GET($redis_index.'prop_type'.$tmp_prop);
                $prop_title=$m->GET($redis_index.'prop_title'.$tmp_prop);
             
                // Выводим свойство на экран
                echo "<div class='div_proper1'>";
                echo "<h4>$prop_title</h4>";
                if ($prop_type==0){ // int +++++++++ 
                    $prop_min=$m->GET($redis_index.'prop_min'.$tmp_prop);
                    $prop_max=$m->GET($redis_index.'prop_max'.$tmp_prop);
                    
                    echo "<table><tr>"; 
                    echo "<td style='width: 45%;'><input id='pro_input_min_$tmp_prop' type='number' value='$prop_min' min='$prop_min' max='$prop_max' /></td>"; // от 
                    echo "<td style='width: 10%;'>...</td>"; // до
                    echo "<td style='width: 45%;'><input id='pro_input_max_$tmp_prop' type='number' value='$prop_max' min='$prop_min' max='$prop_max' /></td>"; // до
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_range_$tmp_prop'>"; // Ползунок 
                    echo "<input id='pro_input_range_$tmp_prop' type='range' value='$prop_max' min='$prop_min' max='$prop_max' />";
                    echo "</td>";
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_apply_$tmp_prop'>"; // Ползунок 
                    echo "<input onclick='pro_range_f($tmp_prop,3)' id='pro_input_submit_$tmp_prop' type='submit' value='Применить' />";
                    echo "</td>";
                    echo "</tr></table>";
                    echo "<script>var pio$tmp_prop=new prop_int_class($tmp_prop);</script>";"; // Экземпляр класса обработки ползунка
                }                /**/
                echo "</div>"; /**/
            }

@Fedor Vlasenko · 29.05.2016, 20:23

Kot137, здесь действительно не стоит js средствами php генерить
стоит задача js получить данные так передавайте их в атрибутах data

HTML5

<div class="group">
  <div data-group="1">group1</div>
  <div data-group="1">group1</div>
  <div data-group="1">group1</div>
</div>
<div class="group">
  <div data-group="2">group2</div>
  <div data-group="2">group2</div>
  <div data-group="2">group2</div>
</div>

Javascript

1
2
3

  $('.group').on('click', 'div', function() {
    alert($(this).data('group'));
  });

Песочница

@dzendev · 29.05.2016, 22:28

Чёт не понял php код

- генерит несколько ползунков?

Добавлено через 36 минут
Вообщем попробовал Ваш код поднять

У меня работает только когда я меняю значения в input[text], тогда ползунок меняет своё положение. Когда дёргаю ползунок ничего не происходит.
Как оно работать то хоть должно?

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery.js"></script>
    <script>
        function prop_int_class(ii){ // Типа класс обработки инпутов и ползунка свойства INT фильтра +++++++++++++++++++++++++++++++++++++++++++
    
    // Инициализация
    this.id=ii;
    this.active_min=false;
    this.active_max=false;
    this.active_range=false;
    this.active_submit=false;
    this.range=""; // ""/min/max
    this.focus_min=false;
    this.focus_max=false;
    this.focus_range=false;  
    var self = this;    
 
    this.iev=function(x,idd){
        // Основная функция объекта
        // Получаем название блока
        var ids;
        if (idd=="min") ids="pro_input_min_"+self.id;
        if (idd=="max") ids="pro_input_max_"+self.id;
        if (idd=="range") ids="pro_input_range_"+self.id;
        
        if (x==0){ // Клик на основное поле min или max
            // Установим активности +++++++++++++++++++++++++++++++
            self.active_min=(idd=="min");
            self.active_max=(idd=="max");
            $("#"+ids).css("background-color","#ffd1b5"); // Подсветка
            //+++++++++++++++++++++++++++++++++++++++++++++++++++++
            
            // Если ползунок этого вида уже есть - то прячем его
            if ((self.range==idd)&&self.active_range){ // отрабатывается в потере фокуса
                //self.active_range=false;
                //$("#pro_td_range_"+self.id).hide();                
            } else{ // Если нет, то прорисовываем
                self.active_range=true;
                $("#pro_td_range_"+self.id).show();
                $('#pro_input_range_'+self.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+self.id).value=document.getElementById(ids).value;
                self.ini("range"); // Возвращаем прослушку событий
            }
        }
        
        if (x==1){ // Измененение
            if (!self.active_submit) { // Рисуем кнопку ПРИМЕНИТЬ
                self.active_submit=true;
                $("#pro_td_apply_"+self.id).show();
            }
            if (idd=="range"){ // Дернули ползунок
                self.focus_range=true;                
                // Клонируем новое значение в инпут
                if (self.active_min) $("#pro_input_min_"+self.id).unbind();
                if (self.active_max) $("#pro_input_max_"+self.id).unbind();
                document.getElementById(ids).value=document.getElementById('pro_input_range_'+self.id).value;
                if (self.active_min) self.ini("min");
                if (self.active_max) self.ini("max");
            } else{ // Изменили ручками в инпуте
                self.active_range=true;
                $("#pro_td_range_"+self.id).show();
                $('#pro_input_range_'+self.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+self.id).value=document.getElementById(ids).value;
                self.ini("range"); // Возвращаем прослушку событий                
            }            
        }
        
        if (x==2){ // Потеря фокуса
            if (idd=="range"){ // если ползунок потерял фокус - то прячем его
                self.focus_range=false;
                self.active_range=false;
                $("#pro_td_range_"+self.id).hide(); 
                // Если фокус не появился на активном инпуте - то снимаем активность
                setTimeout(function () {
                    if (!self.active_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            } else{
                // Если фокус теряет инпут и при этом не на ползунок, то надо снимать активность
                self.focus_min=!(idd=="min");
                self.focus_max=!(idd=="max");
                setTimeout(function () {
                    if (!self.focus_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            }
        }
        
        if (x==3){ // Получение фокуса
            self.active_min=(idd=="min");
            self.focus_max=(idd=="max");
            self.focus_range=(idd=="range");
        }
    }
    
    // Начальная установка событий на мин и мах
    this.ini=function(z){
        // if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('click', self.iev(0, "min"));
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('click', {fu: self.iev }, function(event){ event.data.fu(0, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('click', {fu: self.iev }, function(event){ event.data.fu(0, "max");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('change', {fu: self.iev }, function(event){ event.data.fu(1, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('change', {fu: self.iev }, function(event){ event.data.fu(1, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+self.id).bind('change', {fu: self.iev }, function(event){ event.data.fu(1, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('blur', {fu: self.iev }, function(event){ event.data.fu(2, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('blur', {fu: self.iev }, function(event){ event.data.fu(2, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+self.id).bind('blur', {fu: self.iev }, function(event){ event.data.fu(2, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('focusin', {fu: self.iev }, function(event){ event.data.fu(3, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('focusin', {fu: self.iev }, function(event){ event.data.fu(3, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+self.id).bind('focusin', {fu: self.iev }, function(event){ event.data.fu(3, "range");});
        // alert(this.id);
    }    
    this.ini("all"); // Инициализация при первом вызове 
}
    </script>
</head>
<body>
    <?php
        $prd_propers = array(
            0 => array('id' => 1, 'title' => "ololo1", 'min' => 5, 'max' => 100),
            1 => array('id' => 2, 'title' => "ololo2", 'min' => 15, 'max' => 100),
            2 => array('id' => 3, 'title' => "ololo3", 'min' => 25, 'max' => 100)
        );
        foreach  ($prd_propers as  $tmp_prop){ 
                // Получаем данные по свойству
                $prop_type=$tmp_prop[id];
                $prop_title=$tmp_prop[title];
             
                // Выводим свойство на экран
                echo "<div class='div_proper1'>";
                echo "<h4>$prop_title</h4>";
                // if ($prop_type==0){ // int +++++++++ 
                    $prop_min=$tmp_prop[min];
                    $prop_max=$tmp_prop[max];
                    
                    echo "<table><tr>"; 
                    echo "<td style='width: 45%;'><input id='pro_input_min_$tmp_prop[id]' type='number' value='$prop_min' min='$prop_min' max='$prop_max' /></td>"; // от 
                    echo "<td style='width: 10%;'>...</td>"; // до
                    echo "<td style='width: 45%;'><input id='pro_input_max_$tmp_prop[id]' type='number' value='$prop_max' min='$prop_min' max='$prop_max' /></td>"; // до
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_range_$tmp_prop[id]'>"; // Ползунок 
                    echo "<input id='pro_input_range_$tmp_prop[id]' type='range' value='$prop_max' min='$prop_min' max='$prop_max' />";
                    echo "</td>";
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_apply_$tmp_prop[id]'>"; // Ползунок 
                    echo "<input onclick='pro_range_f($tmp_prop[id],3)' id='pro_input_submit_$tmp_prop[id]' type='submit' value='Применить' />";
                    echo "</td>";
                    echo "</tr></table>";
                    echo "<script>var pio$tmp_prop[id]=new prop_int_class($tmp_prop[id]);</script>"; // Экземпляр класса обработки ползунка
                // }                /**/
                echo "</div>"; /**/
            }
 
    ?>
</body>
</html>

@Kot137 · 30.05.2016, 01:40 **[ТС]**

Сообщение от dzendev

Как оно работать то хоть должно?

предполагалось, что это будут фильтры, задающие даипазон. min и max - текстовые инпуты, а при клике на один из них появляется ползунок (один и для мин и для макс). Не работает. Возникают "гонки" при попытке отследить фокус. Я погуглил - нормального решения нет, если только извращаться с settimout...
Я решил отказаться от этой затеи и попробовать сделать дойной ползунок (всегда видимый).

@Padimanskas · 30.05.2016, 04:09

Сообщение от Poznakomlus

здесь мы просто хороним JSONP

но сути дела это не меняет, потому что она заключена не в конкретных технических средствах(можно не обращать внимания на cors?), а в большей степени акцентируется на архитектуре. Но речь не о ТС, а мне очень доставляет и порой хочется просто рыдать от смеха, когда люди прибывающие вместе со мной на этом форуме 2, 3, 5 и более лет, до сих пор мало понимающие о том как организованы приложения внутри и какие мировые стандарты и практики существуют на сегодняшний день, советуют какие-то исправления и прочие шняжки этим новичкам в пределах их собственного хардкода.

@dzendev · 30.05.2016, 09:26

Сообщение от Kot137

Я решил отказаться от этой затеи и попробовать сделать дойной ползунок (всегда видимый).

На jquery ui есть готовое решение для Вашего случая http://jqueryui.com/slider/#range
Если немного подправить получится то, что Вам нужно.

HTML5

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    var maxRange = 500;
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: maxRange,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#min" ).val( ui.values[ 0 ] );
        $( "#max" ).val( ui.values[ 1 ] );
      }
    });
    $( "#min" ).val( $( "#slider-range" ).slider( "values", 0 ) );
    $( "#max" ).val( $( "#slider-range" ).slider( "values", 1 ) );
    $( "#min" ).bind('change', function(event) {
      
    });
    $( "#min" ).change(function() {
      var valMin = $(this).val();
      if(valMin <= $( "#slider-range" ).slider( "values", 1 ) && valMin >= 0){
        $( "#slider-range" ).slider( "values", 0 , valMin );
      }
    });
     $( "#max" ).change(function() {
      var valMax = $(this).val();
      if(valMax >= $( "#slider-range" ).slider( "values", 0 ) && valMax <= maxRange ){
        $( "#slider-range" ).slider( "values", 1 , valMax );
      }
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="min" value="" style="color:#f6931f; font-weight:bold;">
  <input type="text" id="max" value="" style="color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
</body>
</html>

@Kot137 · 30.05.2016, 15:27 **[ТС]**

Сообщение от dzendev

На jquery ui есть готовое решение для Вашего случая http://jqueryui.com/slider/#range

Спасибо. Но от него я еще вчера отказался, т.к. не работает в телефонах. Несколько подобных решений перепробывал и остановился на jqxSlider (jQWidgets). Вот что получилось http://техномагазин.рф/бензопилы

@dzendev · 30.05.2016, 16:18

Сообщение от Kot137

т.к. не работает в телефонах.

Так вроде есть фикс для мобильных устройств jquery.ui.touch-punch.js
http://touchpunch.furf.com/
https://github.com/furf/jquery-ui-touch-punch

Сообщение от Kot137

остановился на jqxSlider (jQWidgets)

Классно конечно, но только платно $199 для одного сайта вроде

@Kot137 · 30.05.2016, 17:33 **[ТС]**

Сообщение от dzendev

Классно конечно, но только платно $199 для одного сайта вроде

Я скачал версию от 2015 на альтернативном сайте. Надеюсь будет работать без попрашайничества...

Новые блоги и статьи
В чем отличие между INNER JOIN и OUTER JOIN bytestream 22.01.2025 В современных базах данных информация часто распределена между множеством взаимосвязанных таблиц, что делает операции объединения JOIN неотъемлемой частью работы с SQL. Эти операции позволяют. . .	Как сделать первую букву заглавной в JavaScript bytestream 22.01.2025 JavaScript предоставляет разработчикам множество инструментов для эффективной работы с текстовыми данными. Одной из часто встречающихся задач при обработке строк является преобразование первой буквы. . .	Что такое Big O нотация и алгоритмическая сложность bytestream 22.01.2025 Введение в алгоритмическую сложность В мире разработки программного обеспечения эффективность алгоритмов играет crucial роль в создании качественных приложений. Алгоритмическая сложность. . .	Как решать конфликты слияния (merge) в Git bytestream 22.01.2025 Конфликты слияния в системе контроля версий Git возникают в ситуациях, когда две или более ветки разработки содержат несовместимые изменения в одних и тех же участках кода. Эти конфликты представляют. . .	Как использовать регулярные выражения bytestream 22.01.2025 Регулярные выражения представляют собой мощный инструмент для работы с текстовыми данными, который позволяет осуществлять поиск, проверку и манипуляцию строками на основе определенных шаблонов. Этот. . .	Как выйти из Vim bytestream 22.01.2025 Vim (Vi IMproved) представляет собой один из самых влиятельных текстовых редакторов в истории компьютерной индустрии, эволюционировавший из своего предшественника Vi, созданного Биллом Джоем в 1976. . .
NoSQL базы данных: что это такое и какие существуют bytestream 22.01.2025 В современную эпоху цифровой трансформации объемы данных растут экспоненциально, создавая новые вызовы для традиционных систем управления базами данных. NoSQL (Not Only SQL) представляет собой. . .	Обновление исследования от команды MCM (январь 2025 г.) Programma_Boinc 22.01.2025 Обновление исследования от команды MCM (январь 2025 г. ) Мы продолжаем изучать молекулярные сигнатуры, связанные с раком легких, с текущим фокусом на GCM1, факторе транскрипции, участвующем в. . .	Как работать с Kafka в Go (Golang) bytestream 22.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки событий и интеграции микросервисов. Эта система, изначально. . .	Как использовать RabbitMQ в Go (Golang) bytestream 22.01.2025 RabbitMQ представляет собой надежный и широко используемый брокер сообщений, который играет ключевую роль в построении современных распределенных систем и микросервисной архитектуры. В основе работы. . .	Как преобразовать список списков в простой список в Python bytestream 22.01.2025 При работе с Python разработчики часто сталкиваются с необходимостью обработки сложных структур данных, среди которых особое место занимают вложенные списки. Эти структуры представляют собой списки,. . .	Что такое GUID / UUID и как их создать bytestream 22.01.2025 В мире разработки программного обеспечения существует постоянная потребность в уникальной идентификации объектов, записей и ресурсов. Эта задача становится особенно актуальной в распределенных. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	29.05.2016, 13:01	2
	Сообщение от Kot137 echo "<script>var pio$i=new prop_int_class($i);</script>"; нельзя генерить скрипты из php. Узнай что такое передача репрезентативного состояния. 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	29.05.2016, 14:31	4
	Сообщение от Kot137 Почему? Из-за того, что может быть JS еще неподгружен? Сообщение от Kot137 "это стиль построения архитектуры распределенного клиент-серверного приложения, который упрощает роутинг и построение API." - причем здесь это? господь милосердный 0

@Kot137 1 / 1 / 0 Регистрация: 14.05.2016 Сообщений: 22
	29.05.2016, 19:27 [ТС]	6
	Сообщение от dzendev var self = this; Огромное Вам спасибо за адекватный ответ! После явного указания this - все заработало! 0

@Fedor Vlasenko 936 / 693 / 236 Регистрация: 01.02.2015 Сообщений: 1,848
	29.05.2016, 19:32	7
	Сообщение от Padimanskas нельзя генерить скрипты из php. Узнай что такое передача репрезентативного состояния. здесь мы просто хороним JSONP 0

@Kot137 1 / 1 / 0 Регистрация: 14.05.2016 Сообщений: 22
	29.05.2016, 19:56 [ТС]	8
	Сообщение от dzendev или var self = this; Хотя нет. Такой подход - копирует параметры объекта в моменте, но при срабатывании событий функция не имеет доступа к актуальным параметрам, она видит те, которые были на момент назначения... (( 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	29.05.2016, 19:59	9
	Сообщение от Kot137 Хотя нет. Такой подход - копирует параметры объекта в моменте, но при срабатывании событий функция не имеет доступа к актуальным параметрам, она видит те, которые были на момент назначения... (( Код киньте 0

@Kot137 1 / 1 / 0 Регистрация: 14.05.2016 Сообщений: 22
	30.05.2016, 01:40 [ТС]	13
	Сообщение от dzendev Как оно работать то хоть должно? предполагалось, что это будут фильтры, задающие даипазон. min и max - текстовые инпуты, а при клике на один из них появляется ползунок (один и для мин и для макс). Не работает. Возникают "гонки" при попытке отследить фокус. Я погуглил - нормального решения нет, если только извращаться с settimout... Я решил отказаться от этой затеи и попробовать сделать дойной ползунок (всегда видимый). 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	30.05.2016, 04:09	14
	Сообщение от Poznakomlus здесь мы просто хороним JSONP но сути дела это не меняет, потому что она заключена не в конкретных технических средствах(можно не обращать внимания на cors?), а в большей степени акцентируется на архитектуре. Но речь не о ТС, а мне очень доставляет и порой хочется просто рыдать от смеха, когда люди прибывающие вместе со мной на этом форуме 2, 3, 5 и более лет, до сих пор мало понимающие о том как организованы приложения внутри и какие мировые стандарты и практики существуют на сегодняшний день, советуют какие-то исправления и прочие шняжки этим новичкам в пределах их собственного хардкода. 0

@Kot137 1 / 1 / 0 Регистрация: 14.05.2016 Сообщений: 22
	30.05.2016, 15:27 [ТС]	16
	Сообщение от dzendev На jquery ui есть готовое решение для Вашего случая http://jqueryui.com/slider/#range Спасибо. Но от него я еще вчера отказался, т.к. не работает в телефонах. Несколько подобных решений перепробывал и остановился на jqxSlider (jQWidgets). Вот что получилось http://техномагазин.рф/бензопилы 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	30.05.2016, 16:18	17
	Сообщение от Kot137 т.к. не работает в телефонах. Так вроде есть фикс для мобильных устройств jquery.ui.touch-punch.js http://touchpunch.furf.com/ https://github.com/furf/jquery-ui-touch-punch Сообщение от Kot137 остановился на jqxSlider (jQWidgets) Классно конечно, но только платно $199 для одного сайта вроде 0

@Kot137 1 / 1 / 0 Регистрация: 14.05.2016 Сообщений: 22
	30.05.2016, 17:33 [ТС]	18
	Сообщение от dzendev Классно конечно, но только платно $199 для одного сайта вроде Я скачал версию от 2015 на альтернативном сайте. Надеюсь будет работать без попрашайничества... 0