如何使用 jquery 和缩放（css）放大/缩小每个 div 中的每个图像？答案

【问题标题】：How to zoom in/zoom out each image in each div with jquery and scale (css)?如何使用 jquery 和缩放（css）放大/缩小每个 div 中的每个图像？
【发布时间】：2019-11-19 04:48:28
【问题描述】：

我正在尝试为 www.nhadatsonnghia.com 网站的文章中的图像创建放大/缩小功能。当一切正常时，出现了一个错误，jquery 只对第一个标签中的第一个图像有效，并且每个后续标签中的图像都无法放大/缩小。运行后只有第一张图片有 class style="transform: scale (1);"。

你可以看到它在工作here

那么我应该如何解决以放大/缩小每个 div 中的每个图像？如果您建议我如何解决此问题，我将不胜感激！

非常感谢！

这里是代码

jQuery

$(function() {
    $('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
    $('#nav input').on('click', function() {
        var scale  = parseInt($('#img').data('scale')*10,10),
            nScale = $(this).index()===0 ? scale+1 : scale-1;
            nScale = parseFloat(parseInt(nScale,10)/10);
        $('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
    });
});

HTML

<div class="post-header">
    <div class="desc-image-list">
        <div class="full">
            <div class="natural-thumbnail">
                <img id="img" src="image1.img">  // After running only the first image has class style="transform: scale (1);"
                <div id="nav">
                    <input type="button" value="Zoom in">
                    <input type="button" value="Zoom out">
                </div>
            </div>
            <div class="natural-thumbnail" style="height: 600px;">
                <img id="img" src="image2.img">
                <div id="nav">
                    <input type="button" value="Zoom in">
                    <input type="button" value="Zoom out">
                </div>
            </div>
            <div class="natural-thumbnail" style="height: 0;">
                <img id="img" src="image3.img">
                <div id="nav">
                    <input type="button" value="Zoom in">
                    <input type="button" value="Zoom out">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}

【问题讨论】：

id= 在文档中必须是唯一的。您正在为所有图像使用id=img，因此$("... #img") 只能找到第一个。更改为使用类。
天哪！非常感谢@freedomn-m！你救了我很多。有一个美好的一天兄弟！ :D

标签： javascript jquery html css

【解决方案1】：

除了@freedomn-m 答案。

你可以使用img标签作为css选择器.natural-thumbnail img你不需要任何类。在js下面更新，就可以正常工作了。

$(function() {
    $('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
    $('#nav input').on('click', function() {
        var scale  = parseInt($('.natural-thumbnail img').data('scale')*10,10),
            nScale = $(this).index()===0 ? scale+1 : scale-1;
            nScale = parseFloat(parseInt(nScale,10)/10);
        $('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
    });
});

【讨论】：

非常感谢@SumitPatel！你的建议帮助我了解更多。祝兄弟今天愉快！

【解决方案2】：

元素的 ID 在一个 html 页面上应该是唯一的。

你可以用这个

$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');

【讨论】：

感谢@JonySaini 帮助我！祝兄弟今天愉快！