jquery - 使用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

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