0

次のようなコスト属性を持つ画像を作成しました

 <img src="http://www.macnetwork.org/images/icon_linkedIn.png" cost="280" alt=''/>

ここでは、各コストにさまざまなimgタグが追加されます。しかし、私がimgを選択するとき、そのコストは<div>名前付きで追加する必要があります.cost

ここにHTML

 <div id="main">

<img src="http://www.small-icons.com/stock-icons/small-toolbar40.gif" cost="100" alt=''/>
 <img src="http://www.homeworldbusiness.com/media/icons/icon_mini_linkedin.png" cost="200" alt=''/>
 <img src="http://www.driscoll-const.com/images/skin/feed_icon.png" cost="300" alt=''/>
 <img src=" http://www.isos.com/sites/default/files/icon_images/cabling-small.png" cost="400" alt=''/>


 </div>
<div id="secondary">

<img src="http://www.macnetwork.org/images/icon_linkedIn.png" cost="280" alt=''/>
<img src="http://www.macnetwork.org/images/icon_rss.png" cost="140" alt=''/>
<img src="http://www.gogrid.com/gg/images/products/gg_prod_icon.png" cost="80" alt=''/>
<img src="http://www.lateralpaymentsolutions.com/images/contact_small_icon.jpg" cost="20" alt=''/>
 </div> 


 <div id="preview_section" style="clear:both">
 <div class="cost"></div>
<div id="main_img"></div>
  <div id="secondary_img"></div>
 </div>

このコスト分割では、選択した各画像の値を加算および減算する必要があります。

メインdivの画像1とセカンダリdivの画像2を選択した場合 、コストは240になります。

同様に、画像が変更された場合は、以前のコストを削減し、選択した画像のコストを追加する必要があります。

スクリプトのテキストを変更しようとしました

  $(document).ready(function(){
      $("#main img").click(function(){
          var src = $(this).attr('src');
          $("#main_img").css("background-image",'url('+src+')');

          var cost = $(this).attr("cost");
          $(".cost").text(cost);
      });



       $("#secondary img").click(function(){
        var src1 = $(this).attr('src');
        $("#secondary_img").css("background-image",'url('+src1+')');

        var cost = $(this).attr("cost");
       $(".cost").text(cost);
      });


 });

jqueryを使用してこの状況で値を加算または減算するにはどうすればよいですか....私はフィドルを作りました

4

3 に答える 3

2

最も簡単な方法は、個別のコストを格納することです。次に、グローバル コスト変数を適切に更新し、総コストを再計算します。

cost1 = parseInt($(this).attr("cost"));
var totalCost = cost1 + cost2;
$(".cost").text(totalCost);

parseInt()注:コスト文字列を整数に変換する関数が必要です。

注2：おそらく他の方法もあります（実際の要件によってはさらに良いですか？）方法もあります。たとえば、セレクターを使用して選択した画像を見つけることができるため、(グローバル) 変数にコスト値を格納する必要はありません。

更新された fiddleを参照してください。

于 2013-01-18T10:35:17.840 に答える
0

コストを解析し、メイン コストとセカンダリ コストを別々の変数に格納します。そうすれば、1 つの画像が変更されたときのコストを簡単に計算できます。

$(document).ready(function(){

  var cost1 = 0, cost2 = 0;

  $("#main img").click(function(){
    var src = $(this).attr('src');
    $("#main_img").css("background-image",'url('+src+')');

    cost1 = parseInt($(this).attr("cost"), 10);
    updateCost();
  });

  $("#secondary img").click(function(){
    var src1 = $(this).attr('src');
    $("#secondary_img").css("background-image",'url('+src1+')');

    cost2 = parseInt($(this).attr("cost"), 10);
    updateCost();
  });

  function updateCost(){
    $(".cost").text(cost1 + cost2);
  }

});
于 2013-01-18T10:38:40.613 に答える
0

エラーは、テキストを使用していて、追加を使用していないためです。それでは、関数を使用してコストを計算することはできますか?

function workOutCost(updatedPrice){
    var newPrice = Math(parseFloat($('.cost').innerHTML)+updatePrice);
    $('.cost').HTML(newPrice);
}
于 2013-01-18T10:37:36.800 に答える