0

我的 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_and#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 行没有。

4

2 回答 2

1

第一行工作但后续行不工作的原因是因为您不能有多个具有相同IDs 的行。与 jQueryclass选择器不同，ID选择器将找到第一个匹配项，并且只找到那个匹配项，在您的情况下是第一行。

此外，最好不要将 JavaScriptinline与 HTML 一起使用。这就是人们所说的“关注点分离”或“表示和逻辑分离”或任何排列组合。最好将 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>标签。

于 2012-05-08T02:11:31.873 回答
0

尝试将结束跨度添加到您的内容中。这可能有助于您的附加行未正确显示的原因。

<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>
于 2012-05-08T02:07:29.467 回答