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

我正在为网站www.nhadatsonnghia.com的一篇文章中的图像创建放大/缩小功能。当一切正常时，出现了一个错误，jquery只对第一个标记中的第一个图像有效，并且每个后续标记中的图像无法放大/缩小。运行后，只有第一个图像具有class style=“transform:scale（1）；”

你可以看到它在工作

那么，我应该如何确定放大/缩小每个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>

---

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

你可以用这个

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

---

除了@freedomn-m答案

您可以使用

img

标记作为css选择器

。自然缩略图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+')');
    });
});

---

id=

在文档中必须是唯一的。您正在对所有图像使用

id=img

，因此

$（“..#img”）

仅查找第一个图像。更改为使用class.OMG！非常感谢@freedomn-m！你救了我很多。祝你今天愉快，兄弟！：感谢乔尼萨尼对我的帮助！祝你今天愉快，兄弟！非常感谢@SumitPatel！你的建议帮助我了解了更多。祝你今天愉快，兄弟！

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