在每个表格行中的 Prev Next 按钮上显示数据

Question

我的表格有多行。每行都有上一个和下一个按钮。

现在，它显示的是点击 Prev/Next 时的数据。但是，问题是如果我单击 row2 的下一个按钮，然后单击 row1 的上一个按钮，那么它会从 row2 的下一个按钮中获取增量计数。它应该再次从零开始。

 var exampleDataCount = 0;
	
	$(document).on('change', '.js-column', function() {
        exampleDataCount = 0;
        var $target = $(this).parent().next().next();
        var value = '<a href="javascript:void(0)" class="prev_example" data="'+$(this).val()+'"><<</a> '+data[0][$(this).val()]+' <a href="javascript:void(0)" class="next_example" data="'+$(this).val()+'">>></a>';
        $target.html(value);
    });
    
    $(document).on('click', '.prev_example', function() {
		
		if( exampleDataCount != 0 )
            exampleDataCount--;
		
        var $target = $(this).parent();
        var field = $(this).parent().prev().prev().children('select.js-column');
        var value = '<a href="javascript:void(0)" class="prev_example" data="'+$(this).attr('data')+'"><<</a> '+data[exampleDataCount][field.val()]+' <a href="javascript:void(0)" class="next_example" data="'+$(this).attr('data')+'">>></a>';
        $target.html(value);
    });
    
    $(document).on('click', '.next_example', function() {
        $('#example_column_heading').val($(this).attr('data'));
		
		if( exampleDataCount != data.length )
            exampleDataCount++;
		
        var $target = $(this).parent();
        var field = $(this).parent().prev().prev().children('select.js-column');
        var value = '<a href="javascript:void(0)" class="prev_example" data="'+$(this).attr('data')+'"><<</a> '+data[exampleDataCount][field.val()]+' <a href="javascript:void(0)" class="next_example" data="'+$(this).attr('data')+'">>></a>';
        $target.html(value);
    });

<tr>
	<td>
		<select class="js-column" name="columns[source][]">
<option value="showstart">showstart</option><option value="showend">showend</option><option value="remedyid">remedyid</option><option value="remedycategory">remedycategory</option><option value="entrytype">entrytype</option><option value="iref" selected="selected">iref</option><option value="ref">ref</option><option value="customer">customer</option><option value="raised">raised</option><option value="priority">priority</option><option value="status">status</option><option value="statusreason">statusreason</option><option value="breachreason">breachreason</option><option </select>
	</td>
	<td>
		<input class="js-mapped-column" name="columns[name][]" type="text" value="">
	</td>
    <td>
		<a href="javascript:void(0)" class="prev_example" data="iref">&lt;&lt;</a>  <a href="javascript:void(0)" class="next_example" data="iref">&gt;&gt;</a>
	</td>
</tr>

Answer 1

这是因为你只是让 exampleDataCount = 0;仅当下拉列表更改时，否则它将从先前的值 exampleDataCount 变量增加或减少。