Событие Click не работает с изображениями, связанными с rotateAnimation в JQuery

99
9

Я пытаюсь повернуть изображение с помощью JQuery "rotateAnimation" и попытаться добавить функцию к
покажите предупреждающее сообщение по щелчку каждого изображения. Предупреждающее сообщение работает для всего изображения, кроме тех, которые я повернул, используя метод jQuery rotateAnimation.


    <div style="position:absolute;top:180px;left:165px;">
<img id="image10" src="Green.png" class="clFree" alt="1" border="0">
<img id="image11" src="Green.png" class="clFree" alt="2" border="0">
<img id="image12" src="Green.png" class="clFree" alt="3" border="0">
<img id="image13" src="Green.png" class="clFree" alt="4" border="0">
</div>

<div style="position:absolute;top:178px;left:125px;"><img id="image31" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:175px;left:100px;"><img id="image30" src="Green.png" alt="first" border="0"></div>

<div style="position:absolute;top:172px;left:75px;"><img id="image29" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:168px;left:50px;"><img id="image28" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:160px;left:22px;"><img id="image27" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:145px;left:-2px;"><img id="image26" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:120px;left:-15px;"><img id="image25" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:95px;left:-22px;"><img id="image24" src="Green.png" alt="first" border="0"></div>

<div title="center" style="position:absolute;top:68px;left:-25px;"><img id="image23" class="clNotFree" src="Red.png" alt="center" border="0"></div>

<div style="position:absolute;top:40px;left:-22px;"><img id="image22" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:15px;left:-15px;"><img id="image21" src="Green.png" alt="first" border="0"></div>
<div style="position:absolute;top:-6px;left:2px;"><img id="image" src="Green.png" alt="first" border="0"></div>

<div style="position:absolute;top:-20px;left:25px;"><img id="image1" src="Green.png" title="fff" alt="f1" border="0"></div>
<div style="position:absolute;top:-30px;left:50px;"><img id="image2" src="Green.png" alt="2" border="0"></div>
<div style="position:absolute;top:-35px;left:75px;"><img id="image3" src="Green.png" alt="3" border="0"></div>
<div style="position:absolute;top:-35px;left:100px;"><img id="image4" src="Green.png" alt="4" border="0"></div>
<div style="position:absolute;top:-35px;left:125px;"><img id="image5" src="Green.png" alt="5" border="0"></div>
<div style="position:absolute;top:-35px;left:150px;"><img id="image6" src="Green.png" alt="6" border="0"></div>
<div style="position:absolute;top:-35px;left:175px;"><img id="image7" src="Green.png" alt="7" border="0"></div>
<div style="position:absolute;top:-32px;left:212px;"><img id="image8" src="Green.png" alt="33" border="0"></div>
<div style="position:absolute;top:-32px;left:235px;"><img id="image9" src="Green.png" alt="34" border="0"></div>

<div style="position:absolute;top:-32px;left:235px;">
<img id="image10" src="Green.png" alt="1" border="0">
<img id="image11" src="Green.png" alt="2" border="0">
<img id="image12" src="Green.png" alt="3" border="0">
<img id="image13" src="Green.png" alt="4" border="0">
</div>


И вот jQuery script


<script type="text/javascript">
$(document).ready(function()
{
$('#image').rotateAnimation({angle:-35});
$('#image1').rotateAnimation({angle:-25});
$('#image2').rotateAnimation({angle:-16});
$('#image3').rotateAnimation({angle:-14});
$('#image4').rotateAnimation({angle:-12});
$('#image5').rotateAnimation({angle:-10});
$('#image6').rotateAnimation({angle:-8});
$('#image7').rotateAnimation({angle:-6});

$('#image21').rotateAnimation({angle:-60});
$('#image22').rotateAnimation({angle:-80});

$('#image23').rotateAnimation({angle:-90});

$('#image24').rotateAnimation({angle:-100});
$('#image25').rotateAnimation({angle:-110});
$('#image26').rotateAnimation({angle:-130});
$('#image27').rotateAnimation({angle:-150});
$('#image28').rotateAnimation({angle:-160});
$('#image29').rotateAnimation({angle:-170});
$('#image30').rotateAnimation({angle:-175});
$('#image31').rotateAnimation({angle:-180});

$("img:not([title])").each(function() {
$(this).attr("title", $(this).attr("alt"))
})

$("img").live("click",function(e) {

// Methode to alert image ID

});

});



Прошу совета. Я очень новичок в JQuery

спросил(а) 2021-01-25T19:25:38+03:00 5 месяцев назад
1
Решение
99

плагин, который вы используете, фактически уничтожает <img> и использует <canvas> для того, что он делает (или <rvml:image> element для IE), но он обертывает элемент в <span> с идентификатором исходного <img> в обоих направлениях, поэтому вы можете использовать .live() с атрибут-запускает с селектором следующим образом:

$("span[id^='image']").live("click", function() {
alert(this.id);
});

ответил(а) 2021-01-25T19:25:38+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема