Question

[编辑] 演示 - http://jsbin.com/wedohawuyu/3/edit?output

打开左侧的蓝色标签，然后将按钮放到绿色div上，出现对话框，在其中放置一些内容并单击按钮。以相同方式拖动下一个蓝色按钮，但更改对话框中的值。点击。

现在两个按钮都执行相同的操作，为什么？

[/编辑]

我有可拖动按钮的菜单，我可以将其放入可排序的div中。可拖动设置为克隆。当您在可排序的div中删除可拖动时，会出现一些文本，其中包含一些文本。

我想要完成的是让evey按钮显示不同的文字，但当我设置第一个按钮显示'qwe'和第二个'asd'时，两个都会显示'asd'。

我理解克隆的想法是错误的，我对jquery和js很新吗？

var dialogHeader, dialogContent, clone, dialog;

var strony = new Array;

$(".dropButton").droppable({
    accept: '.dragButton:not(".ui-sortable-helper")',
    drop : function(ev, ui) {
        clone = $(ui.draggable).clone().addClass("dropped");
        if(clone.hasClass("myBlueButtonDesign")){
            dialog.dialog('open');
        }//..rest is unnecessary I believe
};

dialog = $("#dialog").dialog({
     autoOpen: false,
     modal: true,
     width: 300,
     height: 400,
     buttons: [{
             text: 'Submit',
             click: function() {
                 submitInnerHtml(clone);
             }
         },
         {
             text: 'Cancel',
             click: function() {
                 dialog.dialog('close');
             }
     }]
 });

function submitInnerHtml(button) {
    strony[strony.length] = "<h1>" + dialogHeader.val() + "</h1><br/><p>" + dialogContent.val() + "</p>";
    button.click(function(){
        changeInner(strony.length - 1, "#workspaceNewsFeed", button);
    });
    dialog.dialog('close');
}

function changeInner(id, target, source) {
    $(target).html(strony[id]);
    var sourceName = $(source).find("p").text();
    $(".tekst").append(sourceName);
}

这就是你应该帮我解决的所有问题。如果您需要更多信息，请在评论中提出要求。

我拖动菜单的HTML：

<div id="menu">
        <h3>Green</h3>
            <div>
                <div id="myGreenButton1" class="dragButton myGreenButtonDesign"><p>Button 1</p></div>
                <div id="myGreenButton2"  class="dragButton myGreenButtonDesign"><p>Button 2</p></div>
                <div id="myGreenButton3"  class="dragButton myGreenButtonDesign"><p>Button 3</p></div>
            </div>
        <h3>Red</h3>
            <div>
                <div id="myRedButton1"  class="dragButton myRedButtonDesign"><p>Button 1</p></div>
                <div id="myRedButton2"  class="dragButton myRedButtonDesign"><p>Button 2</p></div>
                <div id="myRedButton3"  class="dragButton myRedButtonDesign"><p>Button 3</p></div>
            </div>
        <h3>Blue</h3>
            <div>
                <div id="myBlueButton1"  class="dragButton myBlueButtonDesign"><p>Button 1</p></div>
                <div id="myBlueButton2"  class="dragButton myBlueButtonDesign"><p>Button 2</p></div>
                <div id="myBlueButton3"  class="dragButton myBlueButtonDesign"><p>Button 3</p></div>
            </div>
    </div>

Answer 1

您的问题的答案为什么显示上次插入的值是因为您在函数调用中始终使用strony.length-1

changeInner(strony.length-1, "#workspaceNewsFeed", button);

所以strony.length-1将指向strony的最后一个索引。

使其动态传递当前点击的按钮索引，否则它将始终打印最后一个。

点击按钮获取索引，这样它将始终指向单击的按钮存储值。

按钮克隆上的不需要的点击事件

1 个答案: