Question

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

虚拟按钮效果很好。现在我想将每个input转换为button，但在此之后它不起作用。

HTML：

div

JavaScript的：

<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>

我还有一个工作小提琴：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

Answer 2

我认为最好在div上使用一些数据：

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

然后：

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

如何设置div值是否正确

2 个答案: