当单击加号减号时，报价计算会增加全部，而不是单个的。

Question

我这里有这个jQuery代码，它运行得很好，计算是可以的，这里唯一的问题是，当我点击正负号它改变了所有，我已经应用了.each()函数，但是我认为我的代码是错的，我的代码在下面，但是我有这个https://jsfiddle.net/Loktfa2b/，也可以让你们看到实际运行的脚本。谢谢各位提前提供帮助：)

这是我的密码

<div role="main" class="ui-content" style="display:flex;">
    <div id="mysliders">
        
        <div class="section-container calc-module slider1">
            <div><div for="slider-1">Testing 1</div></div>
            <div>
                <label for="slider-1"> <span class="help-info"></span></label>
                <div>
                    <div>
                        <button id="minus">-</button>
                        <input class="add" type="range" name="slider-1" id="slider-1" min="0.10" max="50" step="0.10" value="1" />
                        <button id="plus">+</button>
                    </div>
                    <div>$<div id="slider-1-total"></div></div>
                </div>
            </div>
        </div>

        <div class="section-container calc-module slider2">
            <div><div for="slider-2">Testing 2</div></div>                
            <div>
                <label for="slider-2"></label>
                <div>
                    <div>
                        <button id="minus">-</button>
                        <input class="add" type="range" name="slider-2" id="slider-2" min="250" max="50000" step="250" value="1000" />
                        <button id="plus">+</button>
                    </div>
                    <div>$<div id="slider-2-total"></div></div>
                </div>
            </div>
        </div>

        <div class="section-container calc-module slider3">
            <div><div for="slider-3">Testing 2</div></div>
            <div>
                <label for="slider-3"></label>
                <div>
                    <div>
                        <button id="minus">-</button>
                        <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" step=".5" value="20" />
                        <button id="plus">+</button>
                    </div>
                    <div><div id="slider-3-total"></div>%</div>
                </div>
            </div>
        </div>

        <div class="section-container calc-module slider4">
            <div><div for="slider-4">Testing 3</div></div>
            <div>
                <label for="slider-4"></label>
                <div>
                    <div>
                        <button id="minus">-</button>
                        <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" step=".5" value="40" />
                        <button id="plus">+</button>
                    </div>
                    <div><div id="slider-4-total"></div>%</div>
                </div>
            </div>
        </div>

        <div class="section-container calc-module slider5">
            <div><div for="slider-5">Testing 4</div></div>
            <div>
                <label for="slider-5"></label>
                <div>
                    <div>
                        <button id="minus">-</button>
                        <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100000" step="100" value="100" />
                        <button id="plus">+</button>
                    </div>
                    <div>$<div id="slider-5-total"></div></div>
                </div>
            </div>
        </div>
        

    </div>
    
    <div class="right_calc">
        
        <div>

            
           
            
            <div class="roi-result-container"><div>Test 1</div><div><strong id="visit"></strong></div></div>
            <div class="roi-result-container"><div>Test 2</div><div><strong id="leads"></strong></div></div>
            <div class="roi-result-container"><div>Test 3</div><div>$<strong id="cpl"></strong></div></div>
            <div class="roi-result-container"><div>Test 4</div><div><strong id="sales"></strong></div></div>
            <div class="roi-result-container"><div>Test 5</div><div>$<strong id="revenue"></strong></div></div>
            <div class="roi-result-container" style="font-size:30px;font-weight:bold;"><div>Total</div><div><strong id="total"></strong>%</div></div>

        </div>

    </div>

</div>

这是我的jQuery

jQuery(document).ready(function(){
        jQuery( ".calc-module .add" ).each(function() {
            jQuery(this).on("change", function () {
                addAll();
            });
           

            addAll();
        });     
    });


    function addAll() {
        var sum = 0
        var slider1 = jQuery('.slider1 .add').val(); //visit
        var slider2 = jQuery('.slider2 .add').val(); //Leads
        var slider3 = jQuery('.slider3 .add').val(); //cpl
        var slider4 = jQuery('.slider4 .add').val(); //sales
        var slider5 = jQuery('.slider5 .add').val(); //revenue

        var slider1_decimal = parseFloat(slider1);
        var slider1_decimal_total = slider1_decimal.toFixed(2);

        //var monthly_management_fee = 1550;

        jQuery('#slider-1-total').html(addCommas(slider1_decimal_total));
        jQuery('#slider-2-total').html(addCommas(slider2));
        jQuery('#slider-3-total').html(slider3);
        jQuery('#slider-4-total').html(slider4);
        jQuery('#slider-5-total').html(addCommas(slider5));

        var visit_total = parseFloat(slider2) / parseFloat(slider1);
        var visit_total_no_decimal = visit_total.toFixed(0);
        jQuery('#visit').html(addCommas(visit_total_no_decimal));

        var leads_total = (parseFloat(visit_total) * parseFloat(slider3)) / 100;
        jQuery('#leads').html(addCommas(leads_total.toFixed(0)));

        var clp_total = parseFloat(slider2) / leads_total;
        jQuery('#cpl').html(clp_total.toFixed(0));
        
        var sales_total = parseFloat(visit_total) * (parseFloat(slider3)/100) * (parseFloat(slider4)/100);
        jQuery('#sales').html(addCommas(sales_total.toFixed(0)));

        var revenue_total = parseFloat(sales_total).toFixed(0) * parseFloat(slider5);
        jQuery('#revenue').html(addCommas(revenue_total));
        
        var investment = parseFloat(slider2); //3050
        var investment_total = ((parseFloat(revenue_total) - investment) / investment) * 100;

        jQuery('#total').html(addCommas(investment_total.toFixed(0)));

        
    }


    jQuery( ".calc-module" ).each(function() {  
        jQuery(this).find("#minus").click(function() {
            zoom("out");
        });

        jQuery(this).find("#plus").click(function() {
            zoom("in");
        });
    });


    function zoom(direction) {
    
        jQuery( ".calc-module .add" ).each(function() {
        
            var slider1 = jQuery(this).val(); //visit
            var slider = jQuery(this);
            var step = jQuery(this).attr('step');

            if (direction === "out") {
                newStepValue = parseFloat(slider1) - parseFloat(step); // working
            } else {
                newStepValue = parseFloat(slider1) + parseFloat(step); // working
            }

            slider.val(newStepValue).change();

            console.log();

        });    
        
    };









    function addCommas(x) {
        var parts = x.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }

Answer 1

我已经把你的代码移到Fiddle并修复了。这不是最好的解决办法，但我认为是可行的。

我发现有以下问题。

1. 您有多个具有相同id的按钮--它是id=“减号”和id=“加号”。我已经将它更改为类(所以没有class="minus")
2. when“减号”，但是您调用缩放函数时，没有传递受影响的上下文/滑块--我已经修复了它。

为了获得按钮父容器，我使用了$(this).parent()并将缩放调用更改为：

jQuery(this).find(".minus").click(function() {
    zoom("out", $(this).parent());
});

1. 缩放函数不接受受影响的上下文/滑块容器。基本上，您是在查询每个滑块容器组和更改值。

我已将其改为：

function zoom(direction, sliderGroup) {
    jQuery( ".add", sliderGroup ).each(function() {
       // inner is left the same
    })
})

您可以看到缩放函数有第二个参数sliderGroup，我将这个参数作为查询上下文传递给jQuery查询(第二个参数)。这样，这个jQuery查询函数将只返回给定sliderGroup中具有类add的所有元素。

在这里您可以看到更改后的Fiddle，https://jsfiddle.net/wo26pgd9/6/

如果你有额外的问题或这个解决方案不适合你，请描述你的情况，以便我可以建议一个更好的。

向Łukasz问好

PS:我是新来的--如果我做错了什么，请指出。