我有一个产品项页面,当页面使用JavaScript加载时,应该选择四个权重选项中的第一个。
它工作正常,但现在在对页面设计进行一些更改后似乎无法正常工作。
$( document ).ready( function () {
var licnt = $( '#product-nav' ).length;
for ( var n = 1; n <= licnt; n++ ) {
$( '#price_' + n ).prop( 'checked', true );
var pric = document.getElementById( "price_" + n ).value;
document.getElementById( "prices_" + n ).innerHTML = "<?php echo $currency; ?>" + pric;
$( '.weightval_' + n ).val( "0.50" );
}
} );
function outputValue( item ) {
var pid = item.getAttribute( "id" );
var splitid = pid.split( "_" );
document.getElementById( "prices_" + splitid[ 1 ] ).innerHTML = "<?php echo $currency; ?>" + item.value;
var wght = item.getAttribute( "wght" );
$( '.weightval_' + splitid[ 1 ] ).val( wght );
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="cart_update.php">
<div id="product-nav">
<div class="child">
<div id="prices_$i" class="price"></div>
<div id="weight-select" class="select">
<fieldset style="border: 0;">
<label>
<input type="radio" name="price" value="<?php echo $obj->price_1 ?>" id="price_$i" wght="<?php echo $obj->weight_1 ?>" wghtid="weight_1" onChange="outputValue(this)" >
<div>500g</div></label>
<input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i">
<label>
<input type="radio" name="price" value="<?php echo $obj->price_2 ?>" id="price_$i" wght="<?php echo $obj->weight_2 ?>" wghtid="weight_2" onChange="outputValue(this)">
<div>1kg</div></label>
<input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i" >
<label>
<input type="radio" name="price" value="<?php echo $obj->price_3 ?>" id="price_$i" wght="<?php echo $obj->weight_3 ?>" wghtid="weight_3" onChange="outputValue(this)">
<div>5kg</div></label>
<input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i" >
<label>
<input type="radio" name="price" value="<?php echo $obj->price_4 ?>" id="price_$i" wght="<?php echo $obj->weight_4 ?>" wghtid="weight_4" onChange="outputValue(this)">
<div>10kg</div></label>
<input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i">
<label>
<input type="hidden" name="<?php echo $obj->product_code ?>" value="" />
</label>
</fieldset>
<input type="hidden" name="product_code" value="<?php echo $obj->product_code ?>" />
<input type="hidden" name="type" value="add" />
<input type="hidden" name="return_url" value="<?php echo $current_url ?>" />
</div>
<div class="qty">
<input type="button" value="–" class="qtyminus" field="product_qty" />
<input type="text" name="product_qty" value="1" class="qty-textbox" style="margin-bottom: 0px !important"/>
<input type="button" value="+" class="qtyplus" field="product_qty" />
</div>
<div class="add">
<input type="submit" value="ADD" class="add-cart">
</div>
</div>
</div>
&#13;
答案 0 :(得分:1)
您收到错误
未捕获的TypeError:无法读取属性&#39;值&#39;为null
来自你js的以下一行
var pric = document.getElementById("price_" + n).value;
这是因为您没有正确解析输入id
属性,您使用的变量$i
就像
id="price_$i"
然而它应该是
id="price_<?=$i?>"
您的输入应该如下所示
<input type="radio" name="price" value="<?php echo $obj->price_1 ?>" id="price_<?=$i?>" wght="<?php echo $obj->weight_1 ?>" wghtid="weight_1" onChange="outputValue(this)" >
您可能需要查看此$i
来自何处并且可以正常工作
此外,inputs
有
<input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i">
他们应该像
<input type="hidden" name="weight" value="" id="weight_<?=$i?>" class="weightval_<?=$i?>">