每次jQuery函数运行时重置变量值

Question

我想在页面首次加载时运行我的函数，并在单击某些元素时再次运行。每次运行这个函数时，我都需要它更新变量，但是现在它保留了函数第一次运行时找到的值。

我试着搜索这个问题，发现人们说只是将其设置为null，或未定义。因此，我尝试通过在函数末尾添加var price = null;， var x = null;等来做到这一点。那没有任何作用。因此，我尝试在顶部添加if语句，以查看price的值是否大于0，如果大于0，则将每个变量更改为null。这并没有改变什么。现在我不确定我是否需要重写整个东西，或者我可能遗漏了其他一些细节?

提前感谢您的帮助。

    jQuery(document).ready(function(){
    var bessie = function(){
        //remove or reset value of variables for next time function runs
        if(price > 0){
        var qtyCode = null;
        var qty = null;
        var price = null;
        var total = null;
        var newContent = null;
        };
        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();
        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 
        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9.]+/g,""); 
        //multiply price by qty to get the total for the users current selection
        var total = price * qty;
        //New html that will be inserted into the page
        var newContent = '<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '<div id="qty">' + qtyCode + '</div>' + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p>';
        //New html being inserted
        jQuery(".qtyswitcher-qty").replaceWith(newContent);
    };
    bessie();
    jQuery('.switcher-label').click(bessie);
    jQuery('#qtyswitcher-oneless').click(bessie);
    jQuery('#qtyswitcher-onemore').click(bessie);    
});

移动了一些东西，并根据Data的注释添加了一些新代码。我不确定我做得对不对。正如下面提到的，我也尝试过带和不带括号。它仍然是$9.00，尽管你可以看到。price元素在点击商品时在页面上发生了变化。

链接到我正在处理的html页面

<script type="text/javascript">
    var bessie = function(){
        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();
        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 
        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9.]+/g,""); 
        //multiply price by qty to get the total for the users current selection
        var total = price * qty;
        //New html that will be inserted into the page
        var newContent = '<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '<div id="qty">' + qtyCode + '</div>' + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p>';
        //New html being inserted
        jQuery(".qtyswitcher-qty").replaceWith(newContent);
    }; 

    bessie();
    $('.switcher-label, #qtyswitcher-oneless, #qtyswitcher-onemore' ).on('dblclick click', function(e) { 
        bessie(e);
        e.stopImmediatePropagation();  
    });   

</script>

现在发现了问题，但仍在寻找一个完整的解决方案。.replaceWith ();正在以一种无法显示更新信息的方式替换HTML。下面的代码是工作的，但现在的问题是，我需要找到一种方法，每次替换html而不破坏它。现在的方式是，当一个元素被点击时，它会在页面上添加更多的html。我的代码还是有点乱。

<script type="text/javascript">
jQuery(document).ready(function() {
    var bessie = function(){
        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();
        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 
        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9.]+/g,""); 
        //multiply price by qty to get the total for the users current selection
        var total = price * qty;
        //New html being inserted
        jQuery(".qtyswitcher-add-to-cart-box").append('<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '<div id="qty">');
        jQuery(".qtyswitcher-qty").append('</div>' + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p>');
    }; 
    bessie();
    jQuery('.switcher-label').click(bessie);
    jQuery('.input-box').click(bessie);
    jQuery('#qtyswitcher-oneless').click(bessie);
    jQuery('#qtyswitcher-onemore').click(bessie);
});
</script>

Answer 1

将html与javascript分开比较容易，因此我建议使用手柄。你传递一个对象，它返回html，然后你可以在jQuery中使用。注意，html字符串使用反引号来连接多行字符串。

<script>
    var html = `<p class="multiply">${{price}}/ea</p>
                <p class="multiply2">x</p><div id="qty">{{qtyCode}}</div>
                <p class="multiply3">=</p><p class="multiply">'$'{{total}}</p>`;
    function bessie(){
        var obj = { 'qtyCode' : $('.qtyswitcher-qty').html(),
                    'qty'     : $('#qtyswitcher-qty').val(),
                    'price'   : $('.price').first().text().replace(/[^0-9.]+/g,"") };
        obj.total = obj.price * obj.qty;
        var template = handlebars.compile(html),
            compiled = template(obj);
        $(".qtyswitcher-qty").replaceWith(compiled);
    };
    function addListeners(){
        $('.switcher-label').click(bessie());
        $('#qtyswitcher-oneless').click(bessie());
        $('#qtyswitcher-onemore').click(bessie()); 
    }
    $(document).ready( addListeners(); bessie(); );
</script>

Answer 2

修复!使用insertBefore()和insertAfter()在我想要的地方添加html内容。还添加了一个div类remove me，将有。remove();在每次点击一个元素时使用。

<script type="text/javascript">
jQuery(document).ready(function() {
    var bessie = function(){
        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();
        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-qty').val(); 
        //Pull the current price and change the string to a number
        var price = jQuery('.price').first().text().replace(/[^0-9.]+/g,""); 
        //multiply price by qty to get the total for the users current selection
        var total = price * qty;
        //New html being inserted
        jQuery( '<div class="removeMe"><p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + '</div><div id="qty">' ).insertBefore( '.qtyswitcher-qty');
        jQuery( '</div>' + '<div class="removeMe"><p class="multiply3">=</p> <p class="multiply">' + '$' + total.toFixed(2) + '</p></div>' ).insertAfter( '.qtyswitcher-qty' );
    }; 
    bessie();
    jQuery('.switcher-label, .input-box, #qtyswitcher-oneless, #qtyswitcher-onemore' ).click(function() {
        jQuery( '.removeMe' ).remove();
        bessie();
});
});
</script>