锚定图像和 preventDefault(）

Anchored Images and preventDefault()

本文关键字：preventDefault 图像      更新时间：2023-09-26

我写了一个允许用户搜索图像的小脚本。提交搜索时，在 HTML 中创建并附加了一个大主图像和许多缩略图。图像文件由CSS远程托管和格式化。主图像应该替换为单击的任何缩略图，但我似乎无法让它工作，event.preventDefault(( 也无法正常工作。我有一种感觉，这是jQuery选择器的问题，但是我已经尝试了许多不同的配置，但什么都没有。任何帮助，不胜感激。

<div id="photos">
    <div id="mainImage">
        <a href="http://drive.google.com/pic1.jpg" target="_blank" class="main">
            <img src="http://drive.google.com/pic1.jpg" alt="Pic 1" />
        </a>  
    </div>
    <div id="thumbs">  
        <a href="http://drive.google.com/pic1.jpg" class="thumb">
            <img src="http://drive.google.com/pic1.jpg" alt="Pic 1" class="thumbnail"/>
        </a>
        <a href="http://drive.google.com/pic2.jpg" class="thumb">
            <img src="http://drive.google.com/pic2.jpg" alt="Pic 2" class="thumbnail"/>
        </a>
        <a href="http://drive.google.com/pic3.jpg" class="thumb">
            <img src="http://drive.google.com/pic3.jpg" alt="Pic 3" class="thumbnail"/>
        </a>
    </div>
</div>

$('a.thumb img.thumbnail').on('click', function(event) {
    event.preventDefault();
    var src = $('img.thumbnail').attr('src'), alt = $('img.thumbnail').attr('alt');
    $('a.main').attr('href', src);
    $('a.main img').attr({'src': src, 'alt': alt});  
});

也许你应该试试这个：

$('div#thumbs a.thumb').on('click', function(event) {
    event.preventDefault();
    var image = $(this).find('img');
    var src = image.attr('src');
    var alt = image.attr('alt');
    $('div#mainImage a.main').attr('href', src);
    $('div#mainImage a.main img').attr({'src': src, 'alt': alt});  
});

首先，您正在阻止对图像而不是锚点执行默认的单击操作。其次，使用 $('img.thumbnail') 将在代码中返回多个对象。

问题是锚标记中的 href 值。该脚本在删除后有效。

相关文章：