2

各行には、テキストボックスとボタンがあり、それぞれのテキストボックスでボタンをクリックしたときにテキストデータを取得します。しかし、問題は、textboxIDが同じであるため、ボタンクリックごとに同じ値を取得していることです...ループ内で私のコードはそのようなものです...差分ボタンクリックの各テキストボックスの値を取得する方法はありますか

 <% @obj.each_with_index do |time_sheet, i| %>
   <tr>
     <td style="width:30px;"><input type="text" name="comment"  id='commentId'></td>
     <td class="table-styling"> <button type="button" id="waiver">Waiver</button></td>
   </tr>
  <% end %>


  $('#waiver').live("click", function() {
 var commentVal = $("#commentId").val();
 alert(commentVal); //getting same value for each button click

   });
4

3 に答える 3

3 
$(document).on('click', '#waiver', function() {
   var commentVal = $(this).closest('tr').find("#commentId").val();
   console.log(commentVal);
});

もちろん、IDは一意であり、ループ内で同じIDを持つ要素を大量生産しているように見えますが、これは良い考えではなく、javascriptがブーブーになります。

于 2012-12-14T08:48:08.690 に答える
3

id同じ属性を持つ大量の要素を作成しています。id属性は、1 つの要素を識別するために使用されます。もういや。

代わりにクラスを使用します。

<% @obj.each_with_index do |time_sheet, i| %>
    <tr>
        <td style="width: 30px;">
            <input type="text" name="comment" class="comment" />
        </td>

        <td class="table-styling">
            <button type="button" class="waiver">Waiver</button>
        </td>
    </tr>
<% end %>

そしてあなたのJS：

$(document).on('click', '.waiver', function() {
    var commentVal = $(this).closest('tr').find('.comment').val();
});
于 2012-12-14T08:48:47.523 に答える
3

最初に重要なことは、ID が一意であることです。

それぞれのテキスト ボックスの値を取得する場合は、コードを以下に示すid の代わりにクラス名に置き換えてみてください。

<% @obj.each_with_index do |time_sheet, i| %>
 <tr>
 <td style="width:30px;">
   <input type="text" name="comment"  class='comment-textbox'>    </td>
 <td class="table-styling"> 
   <button type="button" class="btn-waiver">Waiver</button></td>
 </tr>

 $('.btn-waiver').live("click", function() {
 var commentVal =$(this).closest('tr').find('.comment-textbox').val();
     //or
 var commentVal = $(this).parents('tr:first').find('.comment-textbox').val();
 alert(commentVal); //getting same value for each button click

 });
于 2012-12-14T08:50:18.933 に答える