使用jQuery旋转图像阵列中的单个图像

Question

我有一系列图像。 每次迭代都会显示一个图像和一个按钮。 我想通过单击按钮将图像旋转90度。 我更喜欢使用jQuery。

循环代码（PHP和Twig）：

{% for key, file in image_files %}
    <div class="image-box">
        <img class="patient-image" data-uniqueid="{{ key }}" src="/{{ src_path }}{{ file }}">
        <p>
            <a class="rotate-btn btn" data-imageid="{{ key }}">Rotate</a>
        </p>
    </div>
{% endfor %}

data属性用于通过将键值传递给按钮中的data-imageid来存储元素的索引值，以便将其链接到将相同键值分配给data-uniqueid 。 经过检查，每个按钮和图像的值均匹配。

这是用于检索data-值的jQuery：

$( '.rotate-btn' ).on('click', function() {

    // get value of data-imageid from button
    var id = $( this ).data().imageid;

    // get value of data-uniqueid from image
    var imageid = $('.patient-image').data().uniqueid;

});

当我单击第一张图像上的“旋转”按钮时， id和imageid的值匹配。 但是在第二张图像上， id的值正确，但是imageid的值不正确。 它匹配第一个图像值，而不是单击的图像。

可以帮助您识别我的错误所在的任何帮助。 我不确定我是否正确处理此问题。

Answer 1

以下内容未经测试，但希望会有所帮助。 在尝试操作时，无需使用ID来定位元素-只需将同级和父选择器与querySelector / querySelectorAll结合使用即可。 我相信jQuery有它自己的方法，但是我不能建议它们是什么。

这里的想法是获得对用于旋转图像的所有按钮的引用，并为每个按钮分配一个通用事件处理程序。 调用时，事件处理程序将清除所有先前分配的rotated类，并将此css类分配给按钮的同级图像。

{% for key, file in image_files %}
    <div class='image-box'>
        <img class='patient-image' src='/{{ src_path }}{{ file }}'>
        <p>
            <a class='rotate-btn btn'>Rotate</a>
        </p>
    </div>
{% endfor %}

经过测试的版本

    for( $i=0; $i < 10; $i++ ){
        echo "
<div class='image-box'>
    <img class='patient-image' src='/images/homer_2.png'>
    <p>
        <a href='#' class='rotate-btn btn'>Rotate</a>
    </p>
</div>";
    }

    <style>
        .image-box{clear:none; display:inline-block; margin:1rem; float:left;}
        .rotate-btn{padding:1rem;border:1px solid black;background:whitesmoke;cursor:pointer}
        img{ transform:rotate(0deg); transition: all 250ms ease-in-out;  }
        .rotated{ transform:rotate(90deg) }
    </style>


    <script>
        Array.prototype.slice.call( document.querySelectorAll( 'a.rotate-btn' ) ).forEach( bttn=>{

            bttn.addEventListener('click', function(e){
                e.preventDefault();

                /* if other \"rotated\" images are to revert to their original orientation, else remove this or comment it out */
                Array.prototype.slice.call( document.querySelectorAll('img.rotated') ).forEach( img=>{img.classList.remove('rotated') }) 

                /* apply the css class to perform the rotation */
                let img=this.parentNode.parentNode.querySelector('img');
                    img.classList.add( 'rotated' );
            });
        });
    </script>

结果：

Answer 2

var imageid = $('.patient-image').data().uniqueid;

应该

var imageid = $(this).parent().siblings('.patient-image').data().uniqueid;

Answer 3

问题是，使用不带上下文的jQuery函数$('.patient-image') ，您将检索所有具有class patient-image元素。 当您将.data()应用于元素选择时，它将在第一个元素上使用。 这就是为什么该值第一次才是正确的。

我认为您想要的是最接近所单击按钮的元素。

var imageid = $(this).closest('.patient-image').data().uniqueid;

因此是我的建议。 如果仅使用“ id”和“ uniqueid”来标识相应的元素，则使用此方法应使其过时。

我也建议使用$(...).data('uniqueid')而不是每次都获取所有数据。

要旋转相应的图像，请使用以下代码段：

$( '.rotate-btn' ).on('click', function() {
  $(this)
    .closest('.patient-image')
    .css('transform', 'rotate(90deg)')
});