Question

我正在使用设置了data-toggle =“button”的Bootstrap按钮来切换按钮上的活动类，所以我想我会使用hasClass来更新变量。正如你所知，我是javascript / jquery的新手。然后我将变量推送到html并希望它根据被选中或取消选择的按钮进行更新，我只是不能用我应该使用的方法。 AJAX是否必要？

HTML

<h2 id="showPrice"></h2>

<table class="priceTable">
<tr>
    <td>
        <button type="button" class="btn btn-lg priceButton imageBtn"  id="imageBtn">Image Gallery</button>

        <button type="button" class="btn btn-lg priceButton" id="musicBtn" role="button" aria-pressed="false">Music Player</button>
    </td>
</tr>

Javascript（至少是一次尝试！）

var priceA = 300;
var priceB = 400;
var imgBtn = 0;
var mscBtn = 0;
var outputPrice = priceA + imgBtn + mscBtn;

$('#showPrice').html(outputPrice);

$('.priceTable button').click(function(){
                            $(this).toggleClass('active');

  if($(this).hasClass('active')) {
     imgBtn = 25;
} else {imgBtn = 0;}

                            $('#showPrice').html(outputPrice);

});

的jsfiddle https://jsfiddle.net/sm2c8Ly6/

Answer 1

使用jQuery的click()和hasClass()检查并触发变量更新

这样的事情：

$('#imageBtn').click(function(){
    if ($(this).hasClass("active")){
         imgBtn = 25;
    }
});

Answer 2

问题解决了！我相信有一个更简单的方法，但这是我能够弄清楚它的工作原理。任何改进建议都会受到赞赏，因为我将它们用作学习经验。

这是包含其他按钮的jquery。选择按钮后，会将其添加到priceA和priceB的价格范围内。取消选择后，它会再次从价格范围内降低它。

    var priceA = 300;
    var priceB = 400;
    var imgBtn = 0;
    var mscBtn = 0;
    var vidBtn = 0;
    var strBtn = 0;
    var blgBtn = 0;
    var othBtn = 0;

    $('#showPrice, #showPrice2').html('$' + priceA + ' - ' + '$' + priceB);


    $('.priceTable button').click(function(){
    $(this).toggleClass('active');

    if($('.imageBtn').hasClass('active')) {
        imgBtn = 25;
    } else {imgBtn = 0;}

    if($('.musicBtn').hasClass('active')) {
        mscBtn = 50;
    } else {mscBtn = 0;}

    if($('.videoBtn').hasClass('active')) {
        vidBtn = 50;
    } else {vidBtn = 0;}

    if($('.storeBtn').hasClass('active')) {
        strBtn = 75;
    } else {strBtn = 0;}

    if($('.blogBtn').hasClass('active')) {
        blgBtn = 75;
    } else {blgBtn = 0;}

    if($('.otherBtn').hasClass('active')) {
        othBtn = 75;
    } else {othBtn = 0;}

                        });

function calcPrice (){
    var outputPriceA = priceA + imgBtn + mscBtn + vidBtn + strBtn + blgBtn + othBtn;
    var outputPriceB = priceB + imgBtn + mscBtn + vidBtn + strBtn + blgBtn + othBtn;
    $('#showPrice, #showPrice2').html('$' + outputPriceA + ' - ' + '$' + outputPriceB);
};

将变量和输出添加到html

2 个答案: