Как мне переписать обратные вызовы, чтобы убрать необходимость в отдельных метках переменных?

Question

У меня есть шанс на успех и неудачу с колбэками JS. Иногда я могу в течение нескольких недель собирать довольно сложные объекты и элементы управления, а затем BHAM один глаз дергается, и я нажимаю кнопки с моим лучшим впечатлением от шимпанзе. Те, кто обладает знаниями, укажут на очевидное, чего я никогда не знал, поэтому я до сих пор являюсь прекрасным примером эффекта Даннинга-Крюгера

Я учусь намного лучше на примере, поэтому в коде под Неправильный подход все значения принимают последнее назначенное значение, и вы попадаете в режим twitch . Второй фрагмент Наивный подход назначил разные метки, чтобы избежать проблемы с первым фрагментом.

В первом фрагменте первые 3x строки извлекают значения и присваивают их элементу.

        var x = $(".slider-x").slider("value"),
            y = $(".slider-y").slider("value");
        $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");

Без обратных вызовов назначенные значения перезаписываются более поздними строками.

Как переписать с помощью обратных вызовов, чтобы устранить необходимость в отдельных метках переменных?

Неправильный подход

    $('.svg-icon').click(function () {

        var x = $(".slider-x").slider("value"),
            y = $(".slider-y").slider("value");
        $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");
        var scale = $(".slider-svglogo-scale").slider("value");
        $('.svg-size').attr("transform", "scale(" + scale / 100 + ")");                
        var scale = $(".slider-title-text-scale").slider("value");
        $('.svg-business-title').css("font-size", scale1 + "px");            
        var x = $(".slider-title-text-x").slider("value"),
            y = $(".slider-title-text-y").slider("value");
        $('.title-text').attr("x", x);
        $('.title-text').attr("y", y);
        var strap = $('.text-strap').val();
        $('.svg-strap-line').text(strap);
        var x = $(".slider-strapline-text-x").slider("value"),
            y = $(".slider-strapline-text-y").slider("value");
        $('.strapline-text').attr("x", x);
        $('.strapline-text').attr("y", y);
        var scale = $(".slider-strapline-text-scale").slider("value");
        $('.svg-strap-line').css("font-size", scale + "px"); 

        //some code that builds html and sets values
    });

Наивный подход

    $('.svg-icon').click(function () {

        var x = $(".slider-x").slider("value"),
            y = $(".slider-y").slider("value");
        $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");
        var scale = $(".slider-svglogo-scale").slider("value");
        $('.svg-size').attr("transform", "scale(" + scale / 100 + ")");                
        var scale1 = $(".slider-title-text-scale").slider("value");
        $('.svg-business-title').css("font-size", scale1 + "px");            
        var x1 = $(".slider-title-text-x").slider("value"),
            y1 = $(".slider-title-text-y").slider("value");
        $('.title-text').attr("x", x1);
        $('.title-text').attr("y", y1);
        var strap = $('.text-strap').val();
        $('.svg-strap-line').text(strap);
        var x2 = $(".slider-strapline-text-x").slider("value"),
            y2 = $(".slider-strapline-text-y").slider("value");
        $('.strapline-text').attr("x", x2);
        $('.strapline-text').attr("y", y2);
        var scale2 = $(".slider-strapline-text-scale").slider("value");
        $('.svg-strap-line').css("font-size", scale2 + "px"); 

        //some code that builds html and sets values
    });

Answer 1

$('.svg-icon').click(function () {
    const getXY = (xid, yid)=> ({x: $(xid).slider("value"), y: $(yid).slider("value")})
    const setXY = (elId,{x, y})=>$(elid).attr("x", x).attr("y" ,y);
    const getScale = (elId) => $(elid).slider("value");

    const {x,y} = getxy('.slider-x','.slider-y')
    $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");


    setXY('.strapline-text', getXY('.slider-strapline-text-x', ".slider-title-text-y"))
    setXY('.title-text', getXY('.slider-title-text-x', '.slider-title-text-y'))


    $('.svg-size').attr("transform", "scale(" + getScale('.slider-svglogo-scale') / 100 + ")");
    $('.svg-business-title').css("font-size", getScale('.slider-title-text-scale') + "px");
    $('.svg-strap-line').css("font-size", getScale("slider-strapline-text-scale") + "px"); 


    var strap = $('.text-strap').val();
    $('.svg-strap-line').text(strap);
    //some code that builds html and sets values
});

Вы могли бы сделать его более СУХИМ с опытом Jquery, но тогда, на мой взгляд, код стал бы нечитаемым. Еще нет ярлыков.