javascript - 锚定图像和 preventDefault()

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});  
});

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