Question

我写了一个小脚本，允许用户搜索图像。在提交搜索时，会在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});  
});

Answer 1

也许你应该试试这个：

$('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});  
});

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

Answer 2

问题是锚标签中的href值。该脚本在删除后工作。

锚定图像和preventDefault（）

2 个答案: