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

Question

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

我尝试搜索此问题并发现人们只是将其设置为null或未定义。所以我尝试通过在函数末尾添加var price = null;，var x = null;等来做到这一点。那没有做任何事情。所以我尝试在顶部添加一个if语句来查看price是否具有大于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的评论添加了一些新代码。我不确定我是否正确这样做了。我也曾尝试使用和不使用括号，如下所述。即使您在点击项目时可以看到.price元素在页面上发生变化，它仍然保持9.00美元。

Link to page with the html I am messing with

<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（）;每次点击一个元素时都会使用它。

<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>