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

这应该做什么？这看起来像是在尝试获取一个名为＆＃34;＃image＆＃34;的属性; + i =＆＃34;＃image1＆＃34;？

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

你的意思是：

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

Answer 2

如果您只绑定事件（例如“点击”），则无需添加唯一ID。但是（正如Diodeus所说）你使用了一个不正确的选择器，就这一行：

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

返回一个值，而不是元素集合。 Look here for jQuery docs;）

如果您为元素分配ID（或其他属性），请使用from：

// $(this).attr( attribute, value )
$(this).attr( 'id', '#image'+ i )

此致

凯文

Answer 3

如果要将事件绑定到执行旋转的页面上的每个图像，您可以执行类似

的操作

var value = 0;

$('img').bind('click',function() {
  $(this).rotate({animateTo: value});
});

每张图片都不需要唯一的ID。（正如Kevin Lucich所说）

检查这个随机旋转图像的小提琴http://jsfiddle.net/7JBW5/。

更新

http://jsfiddle.net/7JBW5/1/

当您只想旋转某些图像时，请为它们添加一个类。

<span><img class="rotatable" src="http://placehold.it/50x50" alt="" title="" width="" height="" /></span>

然后，您只能将事件绑定到这些

$('img.rotatable').bind('click',function() {
  value = Math.floor((Math.random()*360)+1);
  $(this).rotate({animateTo: value});
});

Answer 4

这就是我开始工作的方式，但感谢您帮助我！

<head>
<script language="JavaScript">

$(function(){

  $('img[id^="image_"]').each(function(){
       var value = 0;
           $(this).rotate({

             bind:

            {
              click: function(){

                value +=90;

                $(this).rotate({ animateTo:value})
                //console.log(value);

              }

             }

           });

          });
         });


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

创建动态ID以在页面上旋转图像

4 个答案:

更新