如何存储PHP对象以使用JavaScript单击访问其数据
how to store php object to access its data on click with javascript
我试图找出一种最不显眼和计算成本最低的方式来存储来自我的MySQL数据库的PHP对象,以便它们的数据可以在用户点击时由JavaScript呈现。
目前,我将数据存储为按钮上的自定义属性。但这会产生很多代码,我听说很"慢"。我想知道我是否应该对我的PHP对象进行JSON编码,$items
(见下文),以及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的问题感到困惑。
如果你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);
});
}
这是一个JSfiddle展示JavaScript/JSON部分: http://jsfiddle.net/fz5ZT/55/
要从模板中一次性调用它:
<script src="[your ext script file path].js"></script>
<script>setup_click(<?php echo json_encode($items); ?>);</script>
希望对:)有所帮助
相关文章:
- JavaScript:单击时相对于父级增加变量值
- 使用javascript单击同一按钮,在两种样式之间更改css值
- Javascript:单击单选按钮时显示图像
- 选择了多个用javascript单击的项目
- Javascript单击更改HTML的内容
- 使用 Javascript 单击 ESC 时隐藏菜单
- Javascript 单击html字段值而不编辑.js文件
- 当使用 Javascript 单击图像 A 时,如何将图像 B 的 src 更改为图像 A 的 src
- 传入 javascript 单击事件的参数
- 如何将新的
- 添加到
- 使用JavaScript单击
- 添加到
- 使用javascript单击按钮,根据值筛选html表
- Javascript:单击后更改元素的样式
- 使用Javascript单击选择按钮时,在另一个窗口上显示图像
- 仅使用JAVASCRIPT单击链接或文本时显示模态
- 如何通过它引用谷歌地图标记's id并激活它's使用javascript单击事件
- 在使用Jquery/Javascript单击下一个和上一个按钮时动态添加图像
- Javascript单击函数返回
- 忙时未发生 JavaScript 单击事件
- JavaScript 单击不起作用
- 我正在尝试在使用 javascript 单击按钮时显示表单