javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大,

WBOY
Lepaskan: 2016-08-23 09:17:47
asal
886 orang telah melayarinya

php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大,
javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大,
现在是点击第一张图和下面几张图都是现实第一张放大图
代码如下
{foreach from=$goods_list item=goods}

<code>        <tr>
            <td style="width: 10%;font-size: 16px;border-bottom:1px solid #ccc;"><a name="fff" href="javascript:void(0);" onclick="picBig();"><img    style="max-width:90%" src="%7B%24goods.original_img%7D" alt="javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大," ></a></td>
<p></p>
<div id="divCenter" align="center" style="position: absolute; z-index: 9; display: none; background-color: #eee; width:400px; height:400px;left:50px;top:50px; border:1px solid #222;">
<pre class="brush:php;toolbar:false"><code>           <a href="javascript:void(0);" onclick="picClose();"> <img  src="%7B%24goods.original_img%7D" alt="javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大," ></a>

        </code>
Salin selepas log masuk
Salin selepas log masuk

回复内容:

php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大,
javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大,
现在是点击第一张图和下面几张图都是现实第一张放大图
代码如下
{foreach from=$goods_list item=goods}

<code>        <tr>
            <td style="width: 10%;font-size: 16px;border-bottom:1px solid #ccc;"><a name="fff" href="javascript:void(0);" onclick="picBig();"><img    style="max-width:90%" src="%7B%24goods.original_img%7D" alt="javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大," ></a></td>
<p></p>
<div id="divCenter" align="center" style="position: absolute; z-index: 9; display: none; background-color: #eee; width:400px; height:400px;left:50px;top:50px; border:1px solid #222;">
<pre class="brush:php;toolbar:false"><code>           <a href="javascript:void(0);" onclick="picClose();"> <img  src="%7B%24goods.original_img%7D" alt="javascript - php数组遍历问题,js问题,主要是点击产品缩略图,进行点击事件发大," ></a>

        </code>
Salin selepas log masuk
Salin selepas log masuk

把你的 picBig 代码替换一下

<code>function picBig() {
    var $ = document.querySelector.bind(document);
    var img = event.currentTarget.children[0]; // 获取当前点击的图片
    var url = img.getAttribute('src'); // 获取当前点击的图片地址
    // 获取大图 img 元素并设置要显示的图片地址
    $('#divCenter > a > img').setAttribute('src', url);
    // 显示预览框
    $('#divCenter').style['display'] = 'block';
}</code>
Salin selepas log masuk
Label berkaitan:
sumber:php.cn
Artikel sebelumnya:按照thinkphp官方文档做了 thinkphp表单令牌 请问应该怎么测试其作用 Artikel seterusnya:详解App消息提示后台如何处理
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan