织梦如何获取当前点击的图片地址？-织梦建站-盈思创科技

给图片的 onclick 事件绑定一个自定义的JavaScript函数，并将当前图片的相关信息（如地址、标题等）作为参数传递给这个函数。

（图片来源网络，侵删）

下面我将分几种常见场景,提供详细的代码实现方法。

点击图片在新窗口中打开原图（最常见）

这是最基础的需求，比如在文章内容页点击缩略图,希望在新标签页打开原始的大图。

方法1：直接在织梦标签中使用JavaScript（适用于单张图片）

如果你只需要对一张图片（比如文章的缩略图 [field:litpic/]）进行点击处理,可以直接在模板中嵌入JavaScript。

模板代码示例 (article_article.htm 或其他文章模板):

（图片来源网络，侵删）

<script language="javascript">
    // 定义一个函数，用于在新窗口打开图片
    function openBigImage(imgSrc) {
        // window.open() 用于打开一个新窗口
        // '_blank' 表示在新窗口/新标签页中打开
        // 'width=800,height=600' 是新窗口的尺寸，可以省略或根据需要调整
        window.open(imgSrc, '_blank', 'width=800,height=600');
    }
</script>
<div class="article-content">
    {dede:field.body/}
</div>
<!-- 假设你想让文章的缩略图可点击 -->
<a href="javascript:;" onclick="openBigImage('{dede:field litpic/}');">
    <img src="{dede:field name='litpic'/}" alt="{dede:field.title/}" />
</a>

代码解析:

<script> 标签定义了 openBigImage 函数，它接收一个参数 imgSrc（图片地址）。
在 <a> 标签的 onclick 事件中,我们调用了这个函数。
{dede:field litpic/} 获取的是文章的原始图片地址,这正是我们需要的。
href="javascript:;" 是一个常见的写法，它阻止了 <a> 标签的默认跳转行为，只执行 onclick 里的代码。

方法2：使用jQuery处理列表中的所有图片（推荐）

如果你在一个列表页（如 {dede:arclist}）中，希望列表里每一篇文章的缩略图都可以点击打开大图，使用jQuery会更高效、更优雅。

模板代码示例 (index.htm 或列表页模板):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">织梦图片点击示例</title>
    <!-- 引入jQuery库，如果模板中已经引入，则无需重复引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .article-list img {
            width: 200px;
            height: 150px;
            cursor: pointer; /* 鼠标悬停时显示手型，提示用户可点击 */
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<h1>文章列表</h1>
<ul class="article-list">
    {dede:arclist titlelen='30' row='5'}
    <li>
        <!-- 
            注意：这里我们给每个缩略图都加了一个 data-bigimg 属性，
            用来存储原始大图的地址，这是jQuery获取数据的关键。
        -->
        <img 
            src="[field:litpic/]" 
            alt="[field:title/]" 
            data-bigimg="[field:litpic/]"
            class="clickable-img"
        />
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
    {/dede:arclist}
</ul>
<script language="javascript">
    // 使用jQuery的文档加载完成函数，确保DOM元素都加载完毕后再执行脚本
    $(document).ready(function(){
        // 为所有 class 为 "clickable-img" 的图片绑定点击事件
        $('.clickable-img').click(function(){
            // $(this) 指向当前被点击的图片元素
            // .data('bigimg') 是jQuery的方法，用于获取 data-bigimg 属性的值
            var bigImageUrl = $(this).data('bigimg');
            // 弹出提示框，显示获取到的图片地址（可选）
            // alert('你点击的图片地址是：' + bigImageUrl);
            // 在新窗口中打开大图
            window.open(bigImageUrl, '_blank');
        });
    });
</script>
</body>
</html>

代码解析:

data-bigimg 属性：我们在 <img> 标签中自定义了一个 data-bigimg 属性，并将织梦的 [field:litpic/]（原始图片地址）赋值给它,这是存储和传递数据的最佳实践。
$(document).ready(function(){...});：这是jQuery的标准写法，确保代码在页面完全加载后执行,避免找不到元素。
$('.clickable-img').click(function(){...});：为所有带有 clickable-img 类的图片绑定点击事件，当任何一张这样的图片被点击时,函数内的代码都会执行。
$(this)：在事件处理函数中，$(this) 是一个非常重要的对象，它代表触发当前事件的那个DOM元素（在这里就是被点击的那张 <img>）。
$(this).data('bigimg')：通过jQuery的 .data() 方法，可以轻松获取到我们之前存在 data-bigimg 属性里的值,也就是原始大图的URL。
window.open(...)：使用获取到的URL打开新窗口。

点击图片获取图片路径并执行其他操作

假设你的需求不是打开新窗口，而是获取图片路径后，在页面的某个地方显示出来,或者传给其他JavaScript函数。

模板代码示例 (基于场景二的模板):

<!-- 模板HTML部分 -->
<div class="article-list">
    {dede:arclist titlelen='30' row='5'}
    <li>
        <img 
            src="[field:litpic/]" 
            alt="[field:title/]" 
            data-bigimg="[field:litpic/]"
            data-title="[field:title/]"  // 你也可以传递其他信息
            class="clickable-img"
        />
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
    {/dede:arclist}
</div>
<!-- 在页面上添加一个用来显示结果的区域 -->
<div id="image-info" style="margin-top: 20px; padding: 10px; border: 1px solid #eee;">
    <p>请点击上方图片，信息将显示在这里：</p>
    <p>图片地址：<span id="img-path">-</span></p>
    <p>图片标题：<span id="img-title">-</span></p>
</div>
<script language="javascript">
    $(document).ready(function(){
        $('.clickable-img').click(function(){
            // 获取当前点击图片的各种信息
            var bigImageUrl = $(this).data('bigimg');
            var imageTitle = $(this).data('title'); // 获取 data-title 属性
            // 在页面上显示获取到的信息
            $('#img-path').text(bigImageUrl);
            $('#img-title').text(imageTitle);
            // 你也可以在这里调用其他复杂的函数
            // doSomethingWithImage(bigImageUrl, imageTitle);
        });
    });
</script>

这个例子展示了如何不仅获取图片路径，还能获取图片标题等其他自定义信息,并动态地更新页面内容。

总结与关键点

核心方法：利用HTML元素的 onclick 事件或jQuery的 .click() 事件。
数据传递：使用HTML5的 data-* 属性（如 data-bigimg）来存储和传递图片信息，这是最清晰、最规范的方式。
织梦标签：在模板中，使用 {dede:field name='xxx'} 或 [field:xxx/] 来获取织梦系统中的数据，如图片地址、文章标题等。
jQuery优势：在处理列表中多个元素的事件时，jQuery比原生JavaScript更简洁、更强大,推荐使用。
$(this)：在事件处理中，$(this) 是你最好的朋友,它精准地指向了当前被操作的元素。

选择哪种方法取决于你的具体需求，对于单个图片，方法1足够；对于列表中的多个图片，方法2是更专业、可扩展性更强的解决方案。

织梦如何获取当前点击的图片地址？

点击图片在新窗口中打开原图（最常见）

方法1：直接在织梦标签中使用JavaScript（适用于单张图片）

方法2：使用jQuery处理列表中的所有图片（推荐）

点击图片获取图片路径并执行其他操作

总结与关键点

相关文章

目录[+]