Сбрасывать значения переменных каждый раз, когда запускается функция jQuery

Question

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

Я попытался найти эту проблему и нашел людей, говорящих, просто установив их в значение null или undefined. Поэтому я попытался сделать это, добавив var price = null ;, var x = null; и т. Д. В конце функции. Это ничего не делало. Поэтому я попытался добавить оператор if наверху, чтобы узнать, имеет ли цена значение больше 0, а затем меняет каждую переменную на нуль, если она есть. Это ничего не изменило. Теперь я не уверен, нужно ли мне просто переписать всю вещь, или, может быть, есть еще какие-то детали, которые мне не хватает?

Заранее за вашу помощь.

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 изменяется на странице при нажатии элементов.

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

Исправлено! Использовали 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> 

Answer 2

Легче отделить 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>