0

これはjquery固有の質問だと思いますが、ワードプレスを重力フォームプラグインで使用しています。.add_list_item行を追加して行.delete_list_itemを削除するクラスを持つ3つの列と繰り返し可能な行を持つリストタイプがあります。フィールド コードは次のとおりです。

<li id='field_21_42' class='gfield    conest' >
  <label class='gfield_label' for='input_21_42'>Three Column List</label>
  <div class='ginput_container ginput_list'>
    <table class='gfield_list'>
      <colgroup><col id='gfield_list_42_col1' class='gfield_list_col_odd'></col><col id='gfield_list_42_col2' class='gfield_list_col_even'></col><col id='gfield_list_42_col3' class='gfield_list_col_odd'></col></colgroup>
      <thead><tr><th>Option</th><th>Value</th><th>Notes</th><th>&nbsp;</th></tr></thead>
        <tbody>
          <tr class='gfield_list_row_odd'>
          <td class='gfield_list_cell gfield_list_42_cell1'>
            <select name='input_42[]' tabindex='25' >
              <option value='' >Select Option</option>
              <option value='Option 1' >Option 1</option>
              <option value='Option 2' >Option 2</option>
              <option value='Option 3' >Option 3</option>
              <option value='Option 4' >Option 4</option>
            </select>
          </td>
          <td class='gfield_list_cell gfield_list_42_cell2'>
            <input type='text' name='input_42[]' value='' tabindex='26'/>
          </td>
          <td class='gfield_list_cell gfield_list_42_cell3'>
            <input type='text' name='input_42[]' value='' tabindex='27'/>
          </td>
          <td class='gfield_list_icons'>
            <img src='/wp-content/plugins/gravityforms/images/add.png' class='add_list_item '  title='Add a row' alt='Add a row' onclick='gformAddListItem(this, 0)' style='cursor:pointer; margin:0 3px;' />
            <img src='/wp-content/plugins/gravityforms/images/remove.png'  title='Remove this row' alt='Remove this row' class='delete_list_item' style='cursor:pointer; visibility:hidden;' onclick='gformDeleteListItem(this, 0)' />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</li>

JavaScript を使用して、別のフィールドに id=input_21_41 を入力しました。私が使用したJavaScriptコードは次のとおりです。

<script type="text/javascript">
  jQuery(document).ready(function ($) {
    var values = $("input[type='text'][name='input_42[]']").change(function() {
      var sum = 0;
      values.each(function() { // Step through each one
        var value = parseInt($(this).val(), 10); // Retrieve its numeric value
        sum += (isNaN(value) ? 0 : value); // Add to the total
      });
      $('#input_21_41').val(sum); // And show the average
    });
  });
</script>

うまく機能しますが、列 2 の最初の行を #input_21_41 にコピーするだけです。.on を使用して追加の値を追加/削除する必要があると言われました。

$( '#input_21_42' ).on( 'click', '.add_list_item', function(){
  // do stuff here
});

これを適切に書き出す方法を理解するのに苦労しているので、追加と削除、そして合計を説明できます.onchange。誰でも私を助けることができますか？

4

1 に答える 1

0

あなたは名前をタイプミスしたと思いますid。の代わりにasというid名前になります。field_21_42input_21_42

$( '#field_21_42' ).on( 'click', '.add_list_item', function(){ ..
于 2013-10-29T16:16:00.257 に答える