javascript - 创建动态 ID 以旋转页面上的图像

Question

我需要旋转页面上的每个图像，它只适用于一个图像，但由于它需要所有 ID 都是唯一的，所以它只旋转第一个图像。我必须以某种方式动态增加在页面上找到的 ID，这就是我所拥有的但没有成功。

  <script>
    $('#media').find('img').each(function(i) {

    var value = 0;
    // $("#image").rotate({
    // $(this).attr('id','#image' + i).rotate({
    $(this).attr('#image' + i).rotate({
        bind:
                {
                    click: function() {
                        value += 90;
                        // $(this).rotate({ animateTo:value})
                        $(this).rotate({animateTo: value});
                    }
                }
    });
})
</script>

<span id="media"><img src="image.jpg" alt="" title="" width="" height="" id="image" /></span>
<span id="media"><img src="photo.jpg" alt="" title="" width="" height="" id="image" /></span>

我正在尝试一种不同的方法，通过为图像分配一个唯一的 ID，然后对其进行交互，但仍然无法正常工作，这就是我现在所拥有的:

  <script language="JavaScript">

  $(document.body).on('click','[id^=image_]',function(){

           var id = this.id.split("_").pop();

           var value = 0

           $('#image_' + id).rotate({

             bind:

            {
              click: function(){

                value +=90;

                $(this).rotate({ animateTo:value})

              }

             }

           });

          })
       </script>

在 BODY 标签内的图像:

<img src="image.jpg" alt="" title="" width="" height="" id="image_1233" /></span>
<img src="photo.jpg" alt="" title="" width="" height="" id="image_0322" /></span>

谢谢!

Answer 1

这是做什么用的？看起来您正在尝试获取名为“#image”+ i =“#image1”的属性？

$(this).attr('#image' + i)

---

你的意思是:

$(this).attr('id', 'image' + i)