Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Обработчик on (https://javascript.ru/forum/dom-window/78378-obrabotchik.html)

Янковиц 04.09.2019 13:10

Обработчик on
 
Добрый день. Использую плагин multirange: jRange по докам:
$('.range-slider-price').jRange({
	showLabels: true,
	isRange : true,
	ondragend: function () {
		$.ajax({
			// здесь код
		});
	}
});

Возможно ли использовать конструкцию с обработчиком on? Типа:
.on('jRange', '.range-slider-price', function() {

Или это бред какой-то?

ksa 04.09.2019 14:11

Цитата:

Сообщение от Янковиц
Или это бред какой-то?

ЖиКвери работает только с тем, под что она заточена... Это ее элементы, элементы ДОМ и ЦСС-селекторы.

Что есть
Цитата:

Сообщение от Янковиц
jRange

?

Янковиц 04.09.2019 14:15

Да, это плагин для multirange

ksa 04.09.2019 14:16

Цитата:

Сообщение от Янковиц
это плагин для multirange

Т.е. отсутствует в списке того, с чем работает жиКвери...

join 04.09.2019 17:21

<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://s3.amazonaws.com/so-answers/jquery.range.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/so-answers/jquery.range-modified.js"></script>
<script>


</script>
<style>
    #quant1 { pointer-events: none; }
</style>


</head>
<body>
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant1" value="0" />
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant2" value="0" />

<div id="foo2" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant3" value="0" />
<div id="foo3" style="height: 100px; width: 100%;" ></div>
<div id="totalRemaining">100 </div>


<script >
var maxVal=100;
$_slider1= $("#quant1");
$_slider1.find('.ui-slider-handle');
$_slider2= $("#quant2");




// With JQuery
$('#quant1').jRange(
{
    from: 0.0,
    to: 100.0,
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    width: 300,
    showLabels: true,
    snap: true,
    id: "thisisanid",
    slide:function(){console.log("sliding")},
    ondragend: function(){  console.log("ondragend");    
        var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
        if (reduceSliderVal){$_slider1.jRange('setValue', ""+reduceSliderVal);}
    }
}).change(function(){
    console.log("change");
        var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
        if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
        setTimeout(function(){ 
            console.log("slider 1 timeout onchange");

            var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
            if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}

        }, 3000);
         //reduces the current slider val if needed
         $_slider1.trigger("ondragend");
            console.log("onchange slider1", reduceSliderVal); 
            console.log("after");
}).on('input mousedown mouseup touchstart click change ondrag', function (e) {
    console.log("triggering dragend slider1");
    $_slider1.trigger("ondragend");

});

$('#quant2').jRange({
    from: 0,
    to: 100,
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    width: 300,
    showLabels: true,
    ondragend: function(){      
        var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
        if (reduceSliderVal){$_slider2.jRange('setValue', ""+reduceSliderVal);}
    }
}).change(function(){
        var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
        if (reduceSliderVal){ $_slider2.jRange('setValue', ""+reduceSliderVal);} //reduces the current slider val if needed
});

function reduceSlider(currentSlider, otherSlider, otherSlider2)
{ // if the slider value of the just-moved slider is too high, reduce it to the appropriate amount
     var negativeExcess= maxVal -  ( parseInt(currentSlider.val() ) + parseInt(otherSlider.val() ) );

    if (negativeExcess < 0)
    {
         console.log("excess calculated", negativeExcess);
         console.log("returning ", (maxVal - parseInt( otherSlider.val() )  )  );
        return (maxVal - parseInt(otherSlider.val())  ); //calculate remainder without involving the current slider since the user may drag the current slider too far beyond the max value, resulting in the current slider being set backwards too far. 
    }else{
            return false;
    }
}
</script>
</body>
</html>


Часовой пояс GMT +3, время: 17:39.