Question

**我的目标**是让用户点击提供的按钮，每个按钮都绑定一个数值，然后在每次点击一个按钮时重新计算总数。

**我的问题**是每次选择一个按钮并重新计算总数时，calculateTotalPrice的一个参数将替换为默认值0.如果给出了两个参数的值（selectedStyle和selectedColours），然后我只想让程序使用提供的值（而不是默认值）。

我希望每个类别的按钮（＆＃34; T恤样式＆＃34;和＃34; #Prown Colors＆＃34;）只能添加一次。例如，如果按钮＆＃34; Tee＆＃34;被选中（值为10）和按钮＆＃34; 1＆＃34;选中（值为3），则总数应为13。

如果尚未选择每个类别的按钮，则程序应采用默认值0.如果已选择两个按钮，则程序应使用提供的值（在同一示例中，totalPrice = 10 + 3 （13）。

当我使用默认值时，只应用其中一个按钮值。如果我不使用默认值，那么每次计算时，totalPrice都会给我NaN。

我觉得这应该很简单。哈哈。我是一个JavaScript新手，已经阅读了大约50种不同的在线文章，以找到计算总数的最佳方法，但无济于事。

这是我的jQuery代码：

/admin

这是我的HTML代码：

// Initialize totalPrice variable and display to user
var totalPrice = 0;
$('.total-price').html('Total Price = ' + '$' + totalPrice);

// Calculate total price
function calculateTotalPrice (chosenStyle = 0, chosenColours = 0) {
    totalPrice = chosenStyle + chosenColours;
    $('.total-price').html('Total Price = ' + '$' + totalPrice);
}


/* *** Complete T-Shirt Style steps *** */

var calculateStylePrice = function () {

    // Get selected T-Shirt Style button and store in variable
    var tshirtStyle = $(this);

    // Change style of selected button
    $(this).toggleClass('button--clicked');

    // Get selected T-Shirt Style value and store in variable
    var chosenStyle = $(this).val();

    // Initialize chosenStylePrice to hold price of chosen style
    var chosenStylePrice = 0;

    // Add price of selected T-Shirt Style to chosenStylePrice variable
    if (chosenStyle == 'tee') {
        chosenStylePrice = 10;
    }
    if (chosenStyle == 'ladies') {
        chosenStylePrice = 12;
    }
    if (chosenStyle == 'long') {
        chosenStylePrice = 14;
    }
    if (chosenStyle == 'hood') {
        chosenStylePrice = 30;
    }

    // Output selected T-Shirt Style to user
    $('.chosen-style').html('T-Shirt Style = ' + chosenStyle + ' ($' + chosenStylePrice + ')');

    // Add chosenStylePrice price to totalPrice
    calculateTotalPrice(chosenStylePrice);
};

// Bind calculateStylePrice click event to T-Shirt Style buttons
$('[id^=style]').on('click', calculateStylePrice);


/* *** Complete T-Shirt Style steps *** */

var calculateColoursPrice = function () {

    // Get selected # of Colours and store in variable
    var colourNumber = $(this);

    // Change style of selected button
    $(this).toggleClass('button--clicked');

    // Get selected # of Colours value and store in variable
    var chosenColours = $(this).val();

    // Initialize chosenStylePrice to hold price of chosen style
    var chosenColoursPrice = 0;

    // Add price of selected # of Colours to chosenColoursPrice variable
    if (chosenColours == 1) {
        chosenColoursPrice = 3;
    }
    if (chosenColours == 2) {
        chosenColoursPrice = 5;
    }
    if (chosenColours == 3) {
        chosenColoursPrice = 7;
    }
    if (chosenColours == 4) {
        chosenColoursPrice = 9;
    }
    if (chosenColours == 5) {
        chosenColoursPrice = 11;
    }
    if (chosenColours == 6) {
        chosenColoursPrice = 13;
    }

    // Output selected # of Colours to user
    $('.chosen-colours').html('# of Print Colours = ' + chosenColours + ' ($' + chosenColoursPrice + ')');

    // Add chosenColoursPrice price to totalPrice
    calculateTotalPrice(chosenColoursPrice);
};

// Bind calculateColoursPrice click event to # of Print Colours buttons
$('[id^=colour]').on('click', calculateColoursPrice);

Answer 1

你的calculateTotalPrice函数有两个参数，但你从不为函数调用提供两个参数。

如果您有calculateTotalPrice (chosenStyle = 0, chosenColours = 0)并且通过了calculateTotalPrice(anyVariable)，那么您实际上将通过该功能设置chosenStyle = anyVariable, chosenColours = 0。

你可以调用它calculateTotalPrice(chosenStyle,0)，然后再调用calculateTotalPrice(0,chosenColours)，这会将正确的变量设置为你想要的输入，但你仍然会计算错误，因为仍然会将其中一个值设置为0。

相反，您需要每次都传递对面下拉菜单的当前值。

Answer 2

这可能对您有所帮助

＆＃13;

// Initialize totalPrice variable and display to user
var totalPrice = 0;
var chosenColoursPrice = 0;
var chosenStylePrice = 0;
$('.total-price').html('Total Price = ' + '$' + totalPrice);

// Calculate total price
function calculateTotalPrice () {
    totalPrice = chosenStylePrice + chosenColoursPrice;
    $('.total-price').html('Total Price = ' + '$' + totalPrice);
}


/* *** Complete T-Shirt Style steps *** */

var calculateStylePrice = function () {
    // Get selected T-Shirt Style button and store in variable
    var tshirtStyle = $(this);

    // Change style of selected button
    $(this).toggleClass('button--clicked');

    // Get selected T-Shirt Style value and store in variable
    var chosenStyle = $(this).text();

    // Initialize chosenStylePrice to hold price of chosen style
    chosenStylePrice = 0;

    // Add price of selected T-Shirt Style to chosenStylePrice variable
    if (chosenStyle == 'tee') {
        chosenStylePrice = 10;
    }
    if (chosenStyle == 'ladies') {
        chosenStylePrice = 12;
    }
    if (chosenStyle == 'long') {
        chosenStylePrice = 14;
    }
    if (chosenStyle == 'hood') {
        chosenStylePrice = 30;
    }

    // Output selected T-Shirt Style to user
    $('.chosen-style').html('T-Shirt Style = ' + chosenStyle + ' ($' + chosenStylePrice + ')');

    // Add chosenStylePrice price to totalPrice
    calculateTotalPrice(chosenStylePrice);
};

// Bind calculateStylePrice click event to T-Shirt Style buttons
$('[id^=style]').on('click', calculateStylePrice);


/* *** Complete T-Shirt Style steps *** */

var calculateColoursPrice = function () {

    // Get selected # of Colours and store in variable
    var colourNumber = $(this);

    // Change style of selected button
    $(this).toggleClass('button--clicked');

    // Get selected # of Colours value and store in variable
    var chosenColours = parseInt($(this).text());

    // Initialize chosenStylePrice to hold price of chosen style
    chosenColoursPrice = 0;

    // Add price of selected # of Colours to chosenColoursPrice variable
    if (chosenColours == 1) {
        chosenColoursPrice = 3;
    }
    if (chosenColours == 2) {
        chosenColoursPrice = 5;
    }
    if (chosenColours == 3) {
        chosenColoursPrice = 7;
    }
    if (chosenColours == 4) {
        chosenColoursPrice = 9;
    }
    if (chosenColours == 5) {
        chosenColoursPrice = 11;
    }
    if (chosenColours == 6) {
        chosenColoursPrice = 13;
    }

    // Output selected # of Colours to user
    $('.chosen-colours').html('# of Print Colours = ' + chosenColours + ' ($' + chosenColoursPrice + ')');

    // Add chosenColoursPrice price to totalPrice
    calculateTotalPrice();
};

// Bind calculateColoursPrice click event to # of Print Colours buttons
$('[id^=colour]').on('click', calculateColoursPrice);

＆＃13;

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

＆＃13;

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="total-price">0</div>
        <a href="#" id="style-tee" class="button">tee</a>
        <a href="#" id="style-ladies" class="button">ladies</a>
        <a href="#" id="style-long" class="button">long</a>
        <a href="#" id="style-hood" class="button">hood</a>
        <br>
        <br>
        <a href="#" id="colour-1" class="button">1</a>
        <a href="#" id="colour-2" class="button">2</a>
        <a href="#" id="colour-3" class="button">3</a>
        <a href="#" id="colour-4" class="button">4</a>
        <a href="#" id="colour-5" class="button">5</a>
        <a href="#" id="colour-6" class="button">6</a>
        <br>
        <br>
        <div class="chosen-style"></div>
        <div class="chosen-colours"></div>
    </body>
</html>

＆＃13;

为什么每次运行函数时都会替换我提供的参数值？

2 个答案: