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

Question

I have an array of images. Each iteration displays an image and a button. I want to rotate the image 90 degrees by clicking the button. I prefer to do it using jQuery.

Loop code (PHP with 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 %}

The data attribute is used to store the element's index value by passing the key value to data-imageid in the button in order to link it to the image which assigns the same key value to data-uniqueid . On inspection, the values match for each button and image.

Here's the jQuery to retrieve data- values:

$( '.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;

});

When I click the rotate button on the first image, the values of id and imageid match. But on the second image the value of id is correct but the value of imageid is incorrect. It matches the first image value and not the image clicked.

Any help identifying where my error(s) might be is appreciated. I am uncertain whether I am approaching this correctly.

Answer 1

The following is not tested but will, I hope, help. There should be no need to use IDs to target elements as you are trying to do - simply use sibling and parent selectors in conjunction with querySelector / querySelectorAll . I believe jQuery has it's own methods for this but I cannot advise as to what they are.

The idea here is that you obtain a reference to all the buttons used to rotate the images and assign a generic event handler to each. The event handler when invoked clears any previously assigned rotated classes and assigns this css class to the button's sibling image.

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

a tested version

    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>

The result:

Answer 2

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

应该

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

Answer 3

The problem is that using the jQuery function $('.patient-image') without context , you will retrieve all elements having the class patient-image . When you apply .data() to the selection of elements, it will be used on the first one . That's why the value is only right the first time.

I think what you want is the element closest to the button clicked.

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

is therefore my suggestion. In case you are only using the "id" and "uniqueid" for identifying the corresponding element, it should become obsolete using this approach.

I'd also suggest using $(...).data('uniqueid') instead of getting all the data everytime.

To rotate the corresponding image, use the following snippet:

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