2017/02/21

jQueryで価格の差額の最大金額を取得する






ページの中で一番大きい差額を訴求したい場合に使えるかと思って書いてみました。

差額を求めて、価格のカンマをつけたり外したりするのは、こちらの記事で解説してます。
[ jQueryでカンマ有り価格の差額を計算する|Proglad ]




See the Pen jQueryで価格の差額の最大金額を取得する by takapen (@takapen) on CodePen.





HTMLサンプル

最大円OFFです!

なんと円OFF!!!

yen10,000aaa円 -> aaa1,000

なんと円OFF!!!

aaa5,000,000円 -> 1,0aaa00




JavaScriptサンプル

$(function() {

  // カンマをとる処理
  function removeComma(str) {
    return str.replace(/[^0-9]/g,"");
  }

  // 差額を計算する処理
  // 変な値はややこしいので0に変換する
  function calc_sagaku(val1, val2) {
    val1 = ( isNaN( parseInt(val1) ) )? 0: parseInt(val1);
    val2 = ( isNaN( parseInt(val2) ) )? 0: parseInt(val2);
    return (val1 - val2);
  }

  // カンマを入れる処理
  function addComma(str) {
    var num = new String(str);
    while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
    return num;
  };


  $(".sale").each(function(){
 
    var strTeika = $(this).find(".sale__teika").text();
    var strWaribiki = $(this).find(".sale__waribiki").text();

    // カンマをとる処理
    var numTeika = removeComma(strTeika);
    var numWaribiki = removeComma(strWaribiki);

    // 差額を計算する処理
    var sumPrice = calc_sagaku(numTeika, numWaribiki);

    // カンマを入れる処理
    var strSumPrice = addComma(sumPrice);
 
    $(this).find(".sale__sagaku").text(strSumPrice);
 
  });




  // ここから差額の最大金額を取得するjs

  var saleSagaku = $(".sale__sagaku");
  var salePriceMax = $(".sale-price-max");

  // class="sale__sagaku" の各要素から、テキストを取得して、配列に格納
  // 参考 http://www.task-notes.com/entry/20141019/1413717129
  var arrPrice = saleSagaku.map(function(){
    return $(this).text().replace(/[^0-9]/g,""); //数字だけにしたテキストを取り出す
  }).get();// 普通の配列にしたい場合は.get()メソッドを追加。.get()がないとjQueryでラップされた状態で排出され、不便な場合もあるらしい。

  // applyの第一引数は何でもよい。結果は変わらない。
  // Math.max.applyで最大値を出して、それに対してコンマをつける
  // 参考 https://www.softel.co.jp/blogs/tech/archives/1377
  var strCommaSalePriceMax = addComma( Math.max.apply(null, arrPrice) );

  salePriceMax.text( strCommaSalePriceMax );

  // ここまで差額の最大金額を取得するjs


});