Javascript 创建动态ID以旋转页面上的图像_Javascript_Jquery

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

javascript jquery

Javascript 创建动态ID以旋转页面上的图像,javascript,jquery,Javascript,Jquery,我需要旋转页面上的每个图像，它只能处理一个图像，但因为它需要所有ID都是唯一的，所以它只旋转第一个。我必须以某种方式动态地增加页面上的ID，这是我所拥有的，但没有成功 <script> $('#media').find('img').each(function(i) { var value = 0; // $("#image").rotate({ // $(this).attr('id','#image' + i).rotate({ $

我需要旋转页面上的每个图像，它只能处理一个图像，但因为它需要所有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>


$（“#媒体”）。查找（'img'）。每个（函数（i）{
var值=0；
//$（“#图像”）。旋转({
//$（this.attr（'id'，'#image'+i）.旋转({
$（this.attr（“#image”+i）.旋转({
绑定：
{
单击：函数（）{
数值+=90；
//$（this）.rotate（{animateTo:value}）
$（this.rotate（{animateTo:value}）；
}
}
});
})

我正在尝试一种不同的方法，为已经存在的图像分配一个唯一的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>


$（document.body）。在（'click'，'id^=image_u3;]'上，函数（）{
var id=this.id.split（“”）.pop（）；
var值=0
$（'#图像'+id）.旋转({
绑定：
{
单击：函数（）{
数值+=90；
$（this）.rotate（{animateTo:value}）
}
}
});
})

在主体标记的内部，显示以下图像：

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

谢谢！

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

你是说：

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

如果只绑定事件（例如“单击”），则不需要添加唯一的id。但是（正如Diodeus所说）您使用了错误的选择器，因为这一行：

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

返回值，而不是元素集合。；）

如果将ID（或其他属性）指定给元素，请使用from：

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

问候,

Kevin

当您希望将事件绑定到执行旋转的页面上的每个图像时，您可以执行以下操作

var value = 0;

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

您不需要为每个图像使用唯一的id

检查这把随机旋转图像的小提琴

更新

如果只希望旋转某些图像，请向其添加类

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

这就是我成功的原因，但是谢谢你的帮助

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


$（函数（）{
$（'img[id^=“image”]”）。每个（函数（）{
var值=0；
$（这个）。旋转({
绑定：
{
单击：函数（）{
数值+=90；
$（this）.rotate（{animateTo:value}）
//console.log（值）；
}
}
});
});
});

每当我看到添加到页面的图像时，我都会尝试使用或创建一个唯一的ID以使其可以旋转。您应该可以使用ab对象引用而不使用ID来执行此操作。$（此）将自动引用当前选定的图像。但如果您没有ID，则页面上的所有图像都将处于这些条件下，对吗？如果我将唯一的编号附加到图像ID上，如：>>并循环浏览，会怎么样？

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

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