0

私は次のようなシンプルなフードカートを作成しようとしています。オプション、すなわち小、中、大、およびエクストラ、すなわちチーズ、玉ねぎ、唐辛子。

量を計算するスクリプトがありますが、スクリプトは各食品のwhileループ内にあり、スクリプトの各呼び出しを一意にするのに問題があります。

これは私がこれまでに持っているものです：http：//jsfiddle.net/2F8LA/1/

PHPとJS内の各IDの横にあるecho$testnumberを使用して一意にすることを試みましたが、機能しません。私は少し頭を抱えていると思います:)

各ループを一意にするにはどうすればよいですか？前もって感謝します。

<?php
$testnumber = 5;
?>
<?php do { ?>
<?php $testnumber -= 1;?>
<hr />
<div>
<div> 
<select id="options" name="options" class="options">
<option value="10.00">$10.00</option>
<option value="20.50">$20.50</option>
<option value="30.80">$30.80</option>
</select><span style="margin-left:30px;">TOTAL: $<span id="totalamount"> </span></span>
</div>
<br />
<div>
<input type="checkbox" name="extra" value="0.50" />$0.50
<input type="checkbox" name="extra" value="1.50" />$1.50
<input type="checkbox" name="extra" value="0.80" />$0.80
</div>
</div><br />
<script type="text/javascript">
// for adding the options and extras
function displayVals() { // get option value
  calcUsage();
  var singleValues = $("#options").val();
}

var $cbs = $('input[name="extra"]');
function calcUsage() {
var total = $("#options").val();
$cbs.each(function() {
    if(this.checked)
        total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
});
$("#totalamount").text(total); // display total
}

$("#options").change(displayVals);

displayVals();

//For  checkboxes           
$cbs.click(calcUsage);
</script>
<?php }while($testnumber > 0); ?>
<hr />

どうして次のコードができたのか、ありがとうございます。「displayVals（ele）」を「displayVals（$（this））」に接続する方法がわかりません。申し訳ありませんが、Jquery/Javascriptを初めて使用します。

説明する時間がない場合は理解できますが、どこかにリンクがあれば、これが何を意味するのかを知ることができます。

<head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $(document).on('change', 'select[name^=options]', function(){
        displayVals($(this));
    });

    $(document).on('click', 'input[name^=extra]', function(){
        calcUsage($(this));
    });
});
</script>
</head>
<?php $testnumber = 5; ?>
<?php do {  ?>
<?php $testnumber -= 1; ?>
<hr />
<div>
    <div> 
    <select id="options" name="options-<?php echo $testnumber; ?>" class="options">
    <option value="10.00">$10.00</option>
    <option value="20.50">$20.50</option>
    <option value="30.80">$30.80</option>
    </select><span style="margin-left:30px;">TOTAL: $<span id="totalamount-<?php echo $testnumber; ?>"> </span></span>
    </div>
    <br />
    <div>
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80    
    </div>
</div><br />
<script type="text/javascript">
function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.val(),
    $cbs = ele.parent().parent().find('input[name="^extra"]'),
    cnt = cbs.prop('name').split('-')[1]; // the iteration number
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}
</script>
<?php }while($testnumber > 0); ?>
<hr />
4

3 に答える 3

1

これを使って：

<select id="options" name="options<?php echo $testnumber; ?>" class="options">

と：

<input type="checkbox" name="extra<?php echo $testnumber; ?>[]" value="0.50" />$0.50
<input type="checkbox" name="extra<?php echo $testnumber; ?>[]" value="1.50" />$1.50
<input type="checkbox" name="extra<?php echo $testnumber; ?>[]" value="0.80" />$0.80
于 2013-03-27T08:47:55.187 に答える
1

@Barmarが指摘しているように、選択と入力に反復数を追加します。

<select id="options" name="options-<?php echo $testnumber; ?>" class="options">

入力についても同じようにします。

<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80

totalvalueスパンを忘れないでください。

<span id="totalamount-<?php echo $testnumber; ?>">

必要ないくつかの関数は、要素をとして渡し、eleそれを使用して値を取得します。

function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.val(),
    $cbs = ele.parent().parent().find('input[name^="extra"]'),
    cnt = $cbs.prop('name').split('-')[1]; // the iteration number
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}

次に、イベントをドキュメントに委任します。非静的要素は.on()、静的要素にバインドするためにjQueryのメソッドを活用する必要があります。要素$(this)を関数に渡して、計算を実行します。

$(document).on('change', 'select[name^=options]', function(){
    displayVals($(this));
});

$(document).on('click', 'input[name^=extra]', function(){
    calcUsage($(this));
});

これはすべて正常に機能しているはずです。

編集

これをループで使用しないでください。単に先頭に配置し、スクリプトタグでラップします。$(function(){//the javascrpit here });

于 2013-03-27T09:46:37.523 に答える
0

ユーザーOhgodwhyとFiverrの誰かのおかげで、スクリプトが意図したとおりに機能するようになりました。

似たようなものを探している人を助けるためにスクリプトを追加しています。

<head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $(document).on('change', 'select[name^=options]', function(){
        displayVals($(this));
    });

    $(document).on('click', 'input[name^=extra]', function(){
        calcUsage($(this));
    });
});

function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.parent().parent().find('#options').val(),
    $cbs = ele.parent().parent().find('input[name^="extra"]'),
    cnt = ele.prop('name').match(/\d/)[0];
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}
</script>
</head>
<?php $testnumber = 5; ?>
<?php do {  ?>
<?php $testnumber -= 1; ?>
<hr />
<div>
    <div> 
    <select id="options" name="options-<?php echo $testnumber; ?>" class="options">
    <option value="10.00">$10.00</option>
    <option value="20.50">$20.50</option>
    <option value="30.80">$30.80</option>
    </select><span style="margin-left:30px;">TOTAL: $<span id="totalamount-<?php echo $testnumber; ?>"> </span></span>
    </div>
    <br />
    <div>
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80    
    </div>
</div><br />
<?php }while($testnumber > 0); ?>
<script type="text/javascript">
$('[id^=options]').each(function(){ displayVals($(this)); });
</script>
<hr />
于 2013-03-29T09:08:04.430 に答える