0

ユーザーがクリックすると JavaScript でデータをレンダリングできるように、MySQL データベースからの PHP オブジェクトを保存するための、邪魔にならず、計算コストが最も低い方法を見つけようとしています。

現在、ボタンのカスタム属性としてデータを保存しています。しかし、これは多くのコードを生成し、「遅い」と聞いています。$itemsPHP オブジェクト(以下を参照)を JSON でエンコードする必要があるかどうか、およびその JavaScript がどのように見えるかを考えています。私は PHP に Codeigniter を使用しているので、代替foreachループ構文で問題が発生していることに注意してください。

これまでのところ、HTML/PHP については次のようになっています。

<img id="img"></img><a id="url"></a> <!--elements where data is rendered on click-->
<? foreach($items as $item):?>  
<button data-id="<?=$item->id?>" data-url="<?=$item->url?>" data-img="<?=$item->img?>">click<?=$item->id?></button>
<?endforeach;?>

そして、ここに私のJSがあります：

$(document.body).on('click', 'button', function(){
   var $this=$(this), id=$this.data('id'), url=$this.data('url'), img=$this.data('img');
   $('#img').attr('src', img);
   $('#url').attr('href', url).html(url);
});

私のサイトのデータのほとんどは MySQL 経由で PHP から取得されており、そのデータをいつ JavaScript 配列/JSON に変換する必要があるかという問題に長い間混乱していました。

4

1 に答える 1

4

json_encode配列を作成する場合$items(JS で必要なデータのみで構成されている場合)、これを JS 変数に割り当てることができます。

<script>var items = <?php echo json_encode($items); ?></script>

data-urlその後、属性と属性を削除できdata-imgます。次に、JS コード内で次のようにします。

var $this = $(this), id = $this.data('id'), url = items[id].url, img = items[id].img;
// the rest of your code

編集: クリック ハンドラーを別のファイルに移動すると、次のようになります。

function setup_click(items) {
    var $img = $('#img'), $url = $('#url');

    $('button').click(function(evt) {
           var id = $(this).data('id'),
           url = String(items[id].url),
           img=String(items[id].img);
       $url.attr('href', url).html(url);         
           $img.attr('src', img);
    });
}

これは、javascript/JSON 部分を示す JSfiddle です: http://jsfiddle.net/fz5ZT/55/

これをテンプレートからワンショットで呼び出すには:

<script src="[your ext script file path].js"></script>
<script>setup_click(<?php echo json_encode($items); ?>);</script>

それが役立つことを願っています:)

于 2012-04-20T09:24:27.853 に答える