Как убрать влияние одного jQuery Ui Slider на другой?

Question

[Вячеслав Яшников]

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

jQuery(function() {
    var tarif = 6,
        result_outptut = jQuery("#revenue span"),
        client = 24,
        revenue = 0,
        check = 4000,
        time = 3;

    function recount() {
        revenue = (client+check+time)*tarif;
        result_outptut.html(revenue + ' руб/мес');
    };
    jQuery('#tarif').change(function() {
        tarif = jQuery('#tarif option:selected').val();
        recount();
    });
    $(document).on("change keyup", "#amount", function() {
        client = +$(this).val();
        $("#slider-range-min").slider("value", client);
        recount();
    });
    $(document).on("change keyup", "#amount2", function() {
        check = +$(this).val();
        $("#slider-range-min").slider("value", check);
        recount();
    });
    $(document).on("change keyup", "#amount3", function() {
        time = +$(this).val();
        $("#slider-range-min").slider("value", time);
        recount();
    });
});
$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 24,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $('#amount').val(ui.value).trigger("change");
        }
    });
    $("#amount").val($("#slider-range-min").slider("value"));
});

$(function() {
    $("#slider-range-min2").slider({
        range: "min",
        value: 4000,
        min: 1000,
        max: 40000,
        slide: function(event, ui) {
            $("#amount2").val(ui.value).trigger("change");
        }
    });
    $("#amount2").val($("#slider-range-min2").slider("value"));
});

$(function() {
    $("#slider-range-min3").slider({
        range: "min",
        value: 3,
        min: 1,
        max: 10,
        slide: function(event, ui) {
            $("#amount3").val(ui.value).trigger("change");
        }
    });
    $("#amount3").val($("#slider-range-min3").slider("value"));
});

Answer 1

[Денис Букреев]

jsfiddle.net/wwoumw0L

Исходный код:

$(document).on("change keyup", "#amount", function() {
        client = +$(this).val();
        $("#slider-range-min").slider("value", client);
        recount();
    });
    $(document).on("change keyup", "#amount2", function() {
        check = +$(this).val();
        $("#slider-range-min").slider("value", check);
        recount();
    });
    $(document).on("change keyup", "#amount3", function() {
        time = +$(this).val();
        $("#slider-range-min").slider("value", time);
        recount();
    });

Исправленный:

$(document).on("change keyup", "#amount", function() {
        client = +$(this).val();
        $("#slider-range-min").slider("value", client);
        recount();
    });
    $(document).on("change keyup", "#amount2", function() {
        check = +$(this).val();
        $("#slider-range-min2").slider("value", check);
        recount();
    });
    $(document).on("change keyup", "#amount3", function() {
        time = +$(this).val();
        $("#slider-range-min3").slider("value", time);
        recount();
    });

в чем главная ошибка? в том, что одинаково названы идентификаторы - можно ведь хотя бы добавить к одинаковым названиям -постфикс

никогда не именуйте их id1, id2, id4 - это называется быдлокод

Comments

[Вячеслав Яшников]

Хорошо, я учту, спасибо, в дальнейшем я планировал переименовать, теперь буду делать это сразу:) проблемка в том, что я так и не понял, что исправлено, можно как то выделить исправления?

[Денис Букреев]

VyacheslavY: #slider-range-min - они без цифер все в первом случае

[Вячеслав Яшников]

Денис Букреев: понял. Спасибо!