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

ID最初の行が機能しているが、後続の行が機能していない理由は、同じsを持つ複数の行を持つことができないためです。jQueryclassセレクターとは異なり、IDセレクターは最初の一致とその一致のみを見つけます。あなたの場合は最初の行です。

inlineまた、JavaScriptを HTML と一緒に使用しないことをお勧めします。これは、人々が「懸念の分離」または「プレゼンテーションとロジックの分離」またはその順列と呼ぶものです。<script>Javascript は、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(); 
});

PHP を取り出したこの JSfiddle を参照してください。あなたが興味を持っている動作を示していると思います: 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 に答える