0

我有这个html：

<div class="content vertical-gradient">
    <div id="button_id0" class="button services rounded-corners trans-effect"><a class="title-text" href="index.php?services">Tjänster</a></div>
    <div id="button_id1" class="button prices rounded-corners trans-effect"><a class="title-text" href="index.php?prices">Priser</a></div>
    <div id="button_id2" class="button about-me rounded-corners trans-effect"><a class="title-text" href="index.php?aboutme">Om mig</a></div>
</div>

加载 dom 后，我从每个按钮中保存文本（html），如下所示：

$(".button").each(function(index) {            
       //Store all texts (html) from buttons for later user with drag/drop       
       lastHtml[index] = $(this).html();            
}

wherelastHtml被定义为一个全局数组。

在某些情况下，我想更改一个按钮的 html，但是当我将它拖放到某个地方时，我想回到它的原始状态。因此，当将 dom 加载到变量 lastHtml-array 中时，我会保存文本（html）。

在下拉部分中，我通过它的 ID 检索按钮的索引（索引号由元素按钮（useButtonId´）检索，例如 button_id1 将返回索引 1，button_id2 将在删除时返回 index2）。

$( ".content").droppable({
    accept: ".button.dragme", //Must come from this dragged element
    drop: function( event, ui ) {                                                           
        //Show ordinary text for button                     
        var id = $(ui.helper).prop("id");
        var idArray = id.split("_id");                  //array of split between _id, example: [0] = button, [1] = 2                        
        var useButtonId = idArray[1]; 
        $(ui.helper).addClass("trans-effect").removeClass("dragme").removeClass("ui-draggable").html(lastHtml[useButtonId]);
    }   
}

但我真正想要的是这样的：（我想要有多少个我喜欢的按钮，而不必考虑 id，但我仍然希望在加载 dom 并恢复到原始状态时保存所有 html 值拖放特定按钮时的状态）。

<div class="content vertical-gradient">
    <div name="button[]" class="button services rounded-corners trans-effect"><a class="title-text" href="index.php?services">Tjänster</a></div>
    <div name="button[]" class="button prices rounded-corners trans-effect"><a class="title-text" href="index.php?prices">Priser</a></div>
    <div name="button[]" class="button about-me rounded-corners trans-effect"><a class="title-text" href="index.php?aboutme">Om mig</a></div>
</div>

我认为！？我可以使用index()，但我真的不知道如何使用。我试过：

$(ui.helper).index())
$('.content').index(ui.helper))

但他们似乎都没有返回正确的索引。

4

1 回答 1

1

可能更容易将html存储在元素本身上.data()

var $btns=$('.button')
$btns.each(function(){
  var $btn=$(this);
  $btn.data('lastHtml', $btn.html());
});

data()既是 getter 又是 setter，所以要重置：

$(this).html( $(this).data('lasthtml') );

或者创建一个属性或数据存储，例如btn-index引用您存储的数组

$btns.each(function(index) {            
       //Store all texts (html) from buttons for later user with drag/drop       
       lastHtml[index] = $(this).html(); 
       $(this).attr('btn-index',index)/* or*/.data('btn-index',index);           
});

如果仅在可放置示例中使用它，则存储在元素上似乎是最简单的方法

于 2013-11-10T07:57:51.263 回答