使用 jQuery 在图像数组中旋转单个图像

Question

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

循环代码（带有 Twig 的 PHP）：

{% 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

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

Answer 2

以下内容未经测试，但我希望会有所帮助。不需要像您尝试那样使用 ID 来定位元素 - 只需将兄弟选择器和父选择器与querySelector/结合使用即可querySelectorAll。我相信 jQuery 有它自己的方法，但我不能建议它们是什么。这里的想法是您获得对用于旋转图像的所有按钮的引用，并为每个按钮分配一个通用事件处理程序。调用时的事件处理程序会清除任何先前分配的rotated类并将此 css 类分配给按钮的兄弟图像。{% for key, file in image_files %}&nbsp; &nbsp; <div class='image-box'>&nbsp; &nbsp; &nbsp; &nbsp; <img class='patient-image' src='/{{ src_path }}{{ file }}'>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class='rotate-btn btn'>Rotate</a>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>{% endfor %}经过测试的版本&nbsp; &nbsp; for( $i=0; $i < 10; $i++ ){&nbsp; &nbsp; &nbsp; &nbsp; echo "<div class='image-box'>&nbsp; &nbsp; <img class='patient-image' src='/images/homer_2.png'>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <a href='#' class='rotate-btn btn'>Rotate</a>&nbsp; &nbsp; </p></div>";&nbsp; &nbsp; }<style>&nbsp; &nbsp; &nbsp; &nbsp; .image-box{clear:none; display:inline-block; margin:1rem; float:left;}&nbsp; &nbsp; &nbsp; &nbsp; .rotate-btn{padding:1rem;border:1px solid black;background:whitesmoke;cursor:pointer}&nbsp; &nbsp; &nbsp; &nbsp; img{ transform:rotate(0deg); transition: all 250ms ease-in-out;&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .rotated{ transform:rotate(90deg) }&nbsp; &nbsp; </style>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; Array.prototype.slice.call( document.querySelectorAll( 'a.rotate-btn' ) ).forEach( bttn=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bttn.addEventListener('click', function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* if other \"rotated\" images are to revert to their original orientation, else remove this or comment it out */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Array.prototype.slice.call( document.querySelectorAll('img.rotated') ).forEach( img=>{img.classList.remove('rotated') })&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* apply the css class to perform the rotation */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let img=this.parentNode.parentNode.querySelector('img');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.classList.add( 'rotated' );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>

Answer 3

问题是使用$('.patient-image') 没有上下文的 jQuery 函数，您将检索所有具有该类的元素patient-image。当您应用.data()到元素的选择时，它将用于第一个。这就是为什么该值仅在第一次正确的原因。我认为你想要的是最接近点击按钮的元素。var imageid = $(this).closest('.patient-image').data().uniqueid;因此是我的建议。如果您仅使用“id”和“uniqueid”来标识相应的元素，则使用这种方法应该会过时。我还建议使用$(...).data('uniqueid')而不是每次都获取所有数据。要旋转相应的图像，请使用以下代码段：$( '.rotate-btn' ).on('click', function() {&nbsp; $(this)&nbsp; &nbsp; .closest('.patient-image')&nbsp; &nbsp; .css('transform', 'rotate(90deg)')});