使用 javascript 更改 CSS 显示样式

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

第一行有效但后续行无效的原因是您不能有多个具有相同IDs 的行。与 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>