放置事件后向具有不同ID的每个图像添加不同的类

Question

I have 5 pieces of a image in a container which i have to drop in another container to complete the image. 我在一个容器中有5张图像，我必须将其放到另一个容器中以完成图像。 After the image is dropped in another container i want to add a different class to that image depending upon its ID. 将图像放入另一个容器后，我想根据其ID向该图像添加一个不同的类。 so that this image piece will stick to the previous image present in this container. 这样该图像就可以粘贴到该容器中存在的先前图像上。

I am able to implement the drag and drop event and add a single class to each image after drop event. 我能够实现拖放事件，并在拖放事件后向每个图像添加一个类。 what changes i need to make in my code to add a different class to eachimage depending upon its ID 我需要在代码中进行哪些更改，以便根据其ID向每个图像添加不同的类

My code 我的密码

  <style>

   .add-style {
     position:absolute;
    }
   .north-style {
     width: 375px;top: 10px;left: 11px;

    }
   .south-style {
     width: 375px;top: 158px;left: 11px;

    }
    .east-style {
     width: 163px;top: 10px;left: 223px;height: 250px;

    }
    .west-style {
      width: 163px;top: 9px;left: 11px;height: 249px;
    }
    .center-style {
      width: 126px;top: 71px;left: 135px;
    }
 </style>

 <script>
   $(function() {

     $( "#sortable1" ).sortable({
        connectWith: "div"
       });

     $( "#sortable2" ).sortable({
        connectWith: "div",
        stop: function( event, ui ) {
           ui.item.addClass( "add-style" )

         }
     });

     $( "#sortable1, #sortable2" ).disableSelection();
    });
   </script>

Bodypart of code 代码主体

 <body>
   <div class="row-fluid" >
     <div class="span4">
       <div class="span1"></div>
       <div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">

        <legend>Collect Coupon parts</legend>
        <span>1st part</span>
        <img id="north-img" class="ui-state-highlight" src="images/demo/north.png" >
        <span>2nd part</span>
        <img id="south-img" class="ui-state-highlight" src="images/demo/south.png" >
        <span>3rd part</span>
        <img id="east-img" class="ui-state-highlight" src="images/demo/east.png" >
        <span">4th part</span>
        <img id="west-img" class="ui-state-highlight" src="images/demo/west.png" >
        <span>5th part</span>
        <img id="center-img" class="ui-state-highlight" src="images/demo/center.png">

    </div>
  </div>
  <div id="sortable2"  class=" well sidebar-nav sidebar-nav-fixed span8">

    <legend>Canvas section</legend>
  </div>
  </div>
  </body>

Answer 1

First change your classes to the following. 首先将您的课程更改为以下内容。

Two example shown, change for the other 3 too. 显示了两个示例，也更改为其他3个。

     .north-img-style {
         width: 375px;top: 10px;left: 11px;
       }
     .south-img-style {
         width: 375px;top: 158px;left: 11px;
     }

Then in this part of your code add these two lines 然后在代码的这一部分中添加这两行

     stop: function( event, ui ) {

          var theID = ui.item.attr('id');
          ui.item.addClass(theID + '-style');

     }

the var theID grabs the id of the element, and then we just addClass with the same ID but add -style to it. var theID获取元素的id ，然后我们只添加具有相同ID的Class，但向其中添加-style。 So this will work for all five of your different classes. 因此，这将适用于您所有五个不同的类。

EDIT 编辑

Yep, you can add more than one class at a time. 是的，您一次可以添加多个课程。 Just separate with a comma like so: 像这样用逗号分开：

          var theID = ui.item.attr('id');
          ui.item.addClass(theID + '-style', 'add-style');

放置事件后向具有不同ID的每个图像添加不同的类

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-22 07:31:48

放置事件后向具有不同ID的每个图像添加不同的类

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-22 07:31:48

解决方案1
1 已采纳 2014-01-22 07:31:48