javascript - 如何正确设置div值

Question

我为我的网站建立了一个小订单表格。当用户单击 div 时，我会将 div 的 value 写入隐藏的 input 字段。此外，还将有一个摘要表，其中将显示值以供用户检查其输入。

假人与按钮配合得很好。现在我想将每个 button 转换为 div 但之后就不起作用了。

HTML:

<p style="background-color: yellow;">Order</p>
<br />
<div value="1" class="checkButton" id="writeBox">box1</div>
<button value="2" class="checkButton" id="writeBox">box2</button>
<br /><br />
<button value="6" class="checkButton" id="writePack">6 Monate</button>
<button value="12" class="checkButton" id="writePack">12 Monate</button>
<br /><br />
<button value="transfer" class="checkButton" id="writePayment">transfer</button>
<button value="paypal" class="checkButton" id="writePayment">paypal</button>
<button value="debit" class="checkButton" id="writePayment">debit</button>

<br /><br /><br />

<p style="background-color: yellow;">Hidden Input</p>
<br />
box <input type='text' value="" id="writeBoxForm"><br />
Paket <input type='text' value="" id="writePackForm"><br />
Bezahlart <input type='text' value="" id="writePaymentForm">

<br /><br /><br />

<p style="background-color: yellow;">Summary</p>
<br />
<span id="writePackSummary"></span> <span> - Monatspaket</span>
<br /><br />
<span>für box</span> <span id="writeBoxSummary"></span>
<br /><br />
<span>Zahlung per</span> <span id="writePaymentSummary"></span>

JavaScript:

$(".checkButton").click(function() {
var textForm = $( this ).val();
var textSummary = $( this ).val();
var summary = ('#'+this.id+'Summary');

$('#'+this.id+'Form').val(textForm);
$(summary).html(textSummary);

if ( $(this).text() == 'transfer' ) {
    $(summary).html('Überweisung');
} 
else if ( $(this).text() == 'paypal' ) {
    $(summary).html('PayPal');
}
else if ( $(this).text() == 'debit' ) {
    $(summary).html('Lastschrift');
}
});

我还有一个工作 fiddle :http://jsfiddle.net/kKFJ3/2/

感谢您的帮助!

Answer 1

div 没有 value 属性。

var textForm = $(this).attr('value');
var textSummary = $(this).attr('value');
var summary = ('#' + this.id + 'Summary');

<小时/>

元素的ID必须是唯一的

您可以使用 data-* 属性来修复它，例如

<div data-value="1" class="checkButton" data-target="writeBox">box1</div>

然后

var $this = $(this);
var target = $this.data('target');
var textForm = $this.attr('value');
var textSummary = $this.attr('value');
var summary = ('#' + target + 'Summary');


$('#' + target + 'Form').val(textForm);

演示:Fiddle