2

这是示例数据：

100 items or less = $20
200 items or less = $15
500 items or less = $10

示例场景：用户输入150商品 -> 价格为15每件商品$

这就是我能走多远：http: //jsfiddle.net/ByPh5/

<script type="text/javascript">

$(function(){

var tier_prices = {
    '100':'20',
    '200':'15',
    '500':'10'
}

var user_input = $('#user_input').val();

var price_output = 0;                    
/*
   calculate
*/

    $('#price_output').text(price_output)


})​

</script>

<input type="text" id="user_input" value="150"/>
<p id="price_output"></p>​

任何帮助深表感谢

4

6 回答 6

4

（注意：由于您留下了一些歧义，我假设 500 多件商品也需要 20 美元。）

您可以做一些更简单的事情，而不是弄乱那个数据结构。首先是代码，然后是解释（如果注释还不够的话。）

function determine_price ( qty ) {
    var prices = [
        20, //0 to 99
        20, //100 to 199
        15, //200 to 299
        15, //300 to 399
        15, //400 to 499
        10  //500+
    ];

    //divide by the common denominator
    //0-99 turn into 0,
    //100-199 turns into 1
    //200-299 turns into 2
    //and so on
    qty = Math.floor( qty / 100 );

    //check for 600+, which are the same as 500 (last array item)
    return prices[ qty ] || prices.pop();
}

100、200 和 500 有一些共同点：它们是 100 的倍数。所以我们取一个数组，并将每个元素视为 100 的范围：第一个元素 (0) 是 0 到 99 个项目，第二个元素 ( 1) 是 100 到 199 个项目，依此类推。然后，对于每个输入数量，我们除以该公分母，以找出它落在哪个范围内，并获取与该数量对应的价格。

在模棱两可的情况下，即 600 多个元素会发生这种情况（最后一个元素，元素 #6 是 500-599），我们只取最后一个范围的价格。

不需要循环，只需简单的数学运算。

于 2012-07-31T18:47:52.703 回答
3

首先，不要指定价格层的最大数量，而是指定最小数量。并将其定义为排序数组，以便您可以遍历它。

var tier_prices = [
    { minQty: 0,   unitPrice: 20 },
    { minQty: 101, unitPrice: 15 },
    { minQty: 201, unitPrice: 10 }
];

然后，遍历这些值，直到达到大于输入数量的最小数量：

var qty = +$('#user_input').val();
var price;
for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
    price = tier_prices[i].unitPrice;
}
$('#price_output').text(price * qty);

http://jsfiddle.net/gilly3/ByPh5/3/

于 2012-07-31T18:09:13.053 回答
2

对象很好，但有点烦人，因为不能保证您按顺序遍历这些值。

http://jsfiddle.net/radu/6MNuG/

$(function() {
    var tier_prices = {
        '100': '20',
        '200': '15',
        '500': '10'
    };

    $('#user_input').change(function() {

        var num = parseInt($(this).val(), 10),
            price = 0,
            prevTier = 0,
            maxTier = 0;            

        for (var tier in tier_prices) {
            if (tier_prices.hasOwnProperty(tier) && num <= tier) {
                if (tier < prevTier || prevTier == 0) {
                    price = tier_prices[tier];
                    prevTier = tier;
                }
            }

            if (tier > maxTier) maxTier = tier;
        }

        if (num > maxTier) price = tier_prices[maxTier];

        $('#price_output').text(price * num);
    });
})​;​

多维数组示例：http: //jsfiddle.net/radu/6MNuG/

$(function() {
    var tier_prices = [
        [100, 20],
        [200, 15],
        [500, 10]
    ];

    $('#user_input').change(function() {
        var num = parseInt($(this).val(), 10),
            price = 0,
            n = tier_prices.length - 1;

        if (num > tier_prices[n][0]) {
            price = tier_prices[n][1];   
        } else {
            for (var i = 0; i <= n; i++) {                   
                if (num <= tier_prices[i][0]) {
                    price = tier_prices[i][1];
                    break;
                }
            }
        }

        $('#price_output').text(price * num);
    });
});​
于 2012-07-31T16:57:37.167 回答
1

尝试：

var tier_prices = {
    '100': '20',
    '200': '15',
    '500': '10'
}
var price_output = 0;
var multiplier = 1;
$('#user_input').change(function() {
    var user_input = parseInt($('#user_input').val(),10);
    for (tier in tier_prices) {
        if (user_input <= tier) {
            multiplier = tier_prices[tier];
            break;
        }
    }
    $('#price_output').text(user_input * multiplier);
});​

jsFiddle 示例

更新

这是一个使用简单开关/案例放弃您拥有的对象的示例，因为该对象的想法不是很流行或实用。请注意，我添加了一个数量大于 500 的案例：

$('#user_input').change(function() {
    var user_input = parseInt($('#user_input').val(), 10);
    switch (true) {
    case user_input >= 0 && user_input <= 100:
        $('#price_output').text(user_input * 20);
        break;
    case user_input > 100 && user_input <= 200:
        $('#price_output').text(user_input * 15);
        break;
    case user_input > 200 && user_input <= 500:
        $('#price_output').text(user_input * 10);
        break;
    case user_input > 500:
        $('#price_output').text(user_input * 5);
    }
});​

jsFiddle 示例

于 2012-07-31T17:07:20.070 回答
1

正在寻找类似的东西并决定做一些不同的事情，在 js fiddle 中运行它，它似乎工作得很好。正如 gilly3 指出的那样，您可能不想要上限，因此您可能想要做“1 或更多，100 或更多...500 或更多”。我使用的 vars 和 div 名称不同，但您可以看到我正在尝试做的事情并根据您的需要进行调整：

JSFiddle：https ://jsfiddle.net/vx4k2vdh/5/

(function() {
    const tiers = {
        0: 20,
        100: 15,
        200: 10,
        500: 5
    }

    /**
     * Take qty and return the first appropriate
     * tier that it encounters, break when
     * tier has been identified so you don't
     * waste time iterating if u've already found tier
    **/
    function calculatePriceTier(qty) {
        var selectedTier;
        for (var tier in tiers) {
          if (tiers.hasOwnProperty(tier)) {
            if (qty < tier) break;
            selectedTier = tier;
          }
        }
        return selectedTier;
     }

    $(function() {
        /**
         * Every time a new number is selected
         * run calculations and grab tier, total
        **/
        $('#items').on('input', 'input', function() {
            var qty = +$(this).val(),
                tier = calculatePriceTier(qty),
                total = qty * tiers[tier];
            $('#total-price span').text(total);
        });
    });

})();
于 2015-11-08T23:20:46.520 回答
1

OP 的请求中描述的是批量定价。此处给出的所有示例都是针对批量定价而非分层定价。

ruby 中的轮胎定价示例 https://repl.it/repls/IndigoRightDisks

def cost(qty)

tier = {
    10   => 100,
    50   => 97,
    100  =>82,  
    200  =>71,
    300  =>66,
    400  =>64,
    500  =>27,
    1000 =>12
    }

  cs = []
  for cnt in 1..qty
    d = tier.keys.find{|x| cnt  <= x ?cnt <= x :  tier.keys.last == x }    
    cs << tier[d]
  end
  return cs.reduce{|y,x| y+x};
end
于 2018-12-10T16:43:31.593 回答