Question

我的php页面有以下html代码。

<span id="edit_button_<?php echo $row[$id]; ?>" style="display:block;" onClick="editRow(this, '');"><img src="images/edit.png" />
<span id="edit_save_<?php echo $row[$id]; ?>" style="display:none;" onClick="saveRow(this,'');"><img src="images/green_check.png" />
<span id="edit_cancel_<?php echo $row[$id]; ?>" style="display:none;" onClick="cancelEdit(this, '');"><img src="images/red_cross.png" />

在editRow()函数中，我添加了以下行，以使#edit_save_和#edit_cancel_元素可见：

$('#edit_save_'+id).show();
$('#edit_cancel_'+id).show();

但它们没有显示出来。然后我添加了以下几行，但它也不起作用：

document.getElementById('edit_save_'+releaseTable+relPid).style.display = 'block';
document.getElementById('edit_cancel_'+releaseTable+relPid).style.display = 'block';

奇怪的是，问题只出现在一些记录中。就像第1行显示green_check和red_cross图像一样，但第2行不显示。

Answer 1

第一行正在工作但后续行不是的原因是因为您不能拥有多个具有相同ID的行。与jQuery class选择器不同，ID选择器将找到第一个匹配且仅匹配，在您的情况下是第一行。

此外，最好不要将JavaScript inline与HTML一起使用。这就是人们所说的“关注点分离”或"separation of presentation and logic"或其中的任何排列。最好将Javascript放在<script>标记内，或者放在与PHP相同的页面上，或者最好放在外部脚本中。

所以代替这个内联函数调用：

<span onclick="editRow()"></span>

你会这样做：

<script>
      $('span').on('click', function(){
           //call editRow(); 
           // or make other javascript which performs editRow function (toggle display)
       });           
</script>

要回到您的方案并使用基于ID的选择器解决此问题，请为每个可单击按钮edit_button添加一个类，如下所示：

HTML：

<span class="edit_button" data-id="<?php echo $row[$id]; ?>" id="edit_button_<?php echo $row[$id]; ?>" style="display:block;" ><img src="images/edit.png" /></span>
<span id="edit_save_<?php echo $row[$id]; ?>" style="display:none;" onClick="saveRow(this,'');"><img src="images/green_check.png" /></span>
<span id="edit_cancel_<?php echo $row[$id]; ?>" class="cancel_button" data-id="<?php echo $row[$id]; ?>" style="display:none;" ><img src="images/red_cross.png" /></span>

这就是JS的样子：

$('.edit_button').on('click', function(){
    var id=$(this).data('id');
    $(this).toggle();
    $('#edit_save_'+id).toggle();
    $('#edit_cancel_'+id).toggle(); 
});

$('.cancel_button').on('click', function(){
    var id=$(this).data('id');
    $(this).toggle();
    $('#edit_save_'+id).toggle();
    $('#edit_button_'+id).toggle(); 
});

请看看这个JSfiddle，我已经从中取出了PHP。我相信它会显示您感兴趣的行为：http://jsfiddle.net/trpeters1/vLMCh/14/

最后，请添加结束</span>代码。

Answer 2

尝试在内容中添加结束范围。这可能有助于您无法正确显示其他行的原因。

<span id="edit_button_<?php echo $row[$id]; ?>" style="display:block;" onClick="editRow(this, '');"><img src="images/edit.png" /></span>
<span id="edit_save_<?php echo $row[$id]; ?>" style="display:none;" onClick="saveRow(this,'');"><img src="images/green_check.png" /></span>
<span id="edit_cancel_<?php echo $row[$id]; ?>" style="display:none;" onClick="cancelEdit(this, '');"><img src="images/red_cross.png" /></span>

使用javascript更改CSS显示样式

2 个答案: