Question

你好吗？你能帮我这个吗？我想获取特定 p标签中第一个输入的id和第二个输入的文本值

 <p class="receiveitem">
 <label for="mat_id">Material</label>
 <input type="text" id="4"value="GI Coulping" disabled/>
 <label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
 <input type="button" class="receive" value=Receive />
 </p>
 <p class="receiveitem">
 <label for="mat_id">Material</label>
 <input type="text" id="5"value="Vulca Seal" disabled/>
 <label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
 <input type="button" class="receive" value=Receive />
 </p>
 <p class="receiveitem">
 <label for="mat_id">Material</label>
 <input type="text" id="6"value="teflon tape" disabled/>
 <label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
 <input type="button" class="receive" value=Receive />
 </p>

所以当我点击p标签中的接收按钮时。它会输出像

这样的东西

ID: 4 and Value: 10

已经有了js.but我无法完成它。

    $(document).ready(function(){
    $('input#receive').click(function(){

    var mat = $('input[type=text]:first').attr('id');
    var qty = $('input[type=text]:last').val;
    alert(mat + qty);
        });
});

我不知道将 this 放在我的变量mat和qty.please帮助中的哪个位置？

Answer 1

$(document).on('click', 'input#receive', function(e){
 e.preventDefault();
var qty = $(this).prev().prev('input');
alert(qty);
});

您确实需要更改标记以使用数据或唯一ID。

Answer 2

以下是一种修改后的方法，使用语义更正确的data attributes（broadly supported}（基于@ Chase的回答）（and a demo）

<p class="receiveitem">
  <label for="mat_id">Material</label>
  <input name="mat_id" type="text" data-id="4" value="GI Coulping" disabled="disabled"/>
  <label for="rec_qty">Quantity</label>
  <input type="text" name="rec_qty" />
  <input name="rec_qty" type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
  <label for="mat_id">Material</label>
  <input name="mat_id" type="text" data-id="5" value="Vulca Seal" disabled="disabled"/>
  <label for="rec_qty">Quantity</label>
  <input type="text" name="rec_qty" />
  <input type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
  <label for="mat_id">Material</label>
  <input name="mat_id" type="text" data-id="6" value="teflon tape" disabled="disabled"/>
  <label for="rec_qty">Quantity</label>
  <input type="text" name="rec_qty" />
  <input type="button" class="receive" value="Receive" />
</p>

使用此JavaScript

$(document).on("click", "input.receive", function () {
  var mat = $(this).siblings("[name='mat_id']").data("id");
  var qty = $(this).siblings("[name='rec_qty']").val();
  alert("mat id: " + mat + " qty val: " + qty);
});

此方法不会滥用专为节点识别而非数据存储而设计的id attribute。

在特定的<p> </p>中打印值

2 个答案: