首頁猿問使用 jQuery...

使用 jQuery 在圖像數組中旋轉單個圖像

PHP

慕的地8271018 2021-12-03 14:53:21

我有一系列圖像。每次迭代都會顯示一個圖像和一個按鈕。我想通過單擊按鈕將圖像旋轉 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是不正確的。它匹配第一個圖像值而不是單擊的圖像。任何確定我的錯誤可能在哪里的幫助表示贊賞。我不確定我是否正確地處理了這個問題。

查看完整描述

3 回答

撒科打諢

TA貢獻1934條經驗獲得超2個贊

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

應該

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

反對回復 2021-12-03

紅糖糍粑

TA貢獻1815條經驗獲得超6個贊

以下內容未經測試，但我希望會有所幫助。不需要像您嘗試那樣使用 ID 來定位元素 - 只需將兄弟選擇器和父選擇器與querySelector/結合使用即可querySelectorAll。我相信 jQuery 有它自己的方法，但我不能建議它們是什么。

這里的想法是您獲得對用于旋轉圖像的所有按鈕的引用，并為每個按鈕分配一個通用事件處理程序。調用時的事件處理程序會清除任何先前分配的rotated類并將此 css 類分配給按鈕的兄弟圖像。

{% for key, file in image_files %}

<p>

<a class='rotate-btn btn'>Rotate</a>

</p>

</div>

{% endfor %}

經過測試的版本

for( $i=0; $i < 10; $i++ ){

echo "

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

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>

反對回復 2021-12-03

蕭十郎

TA貢獻1815條經驗獲得超13個贊

問題是使用$('.patient-image') 沒有上下文的 jQuery 函數，您將檢索所有具有該類的元素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)')

});

反對回復 2021-12-03

3 回答
0 關注
238 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 jQuery 在圖像數組中旋轉單個圖像

使用 jQuery 在圖像數組中旋轉單個圖像

3 回答

添加回答