Question

我正在尝试使用内部的编辑按钮将透明图层附加到某些元素。编辑按钮具有onclick功能。使用onclick传输的值是来自父元素的ID（透明层附加在其上）

我的问题是，遗憾的是，所有编辑按钮都带有相同的值：cms-block-3。

我做错了什么？

我希望我能正确解释自己。提前谢谢！

HTML示例：

<div class="editable cms-block-1">Some</div>
<div class="editable cms-block-2">Someting else!</div>
<div class="editable cms-block-3">Something else else! :)</div>

$(document).ready(function() {
    $('.editable').each(function(index) {

        $($(this).attr('class').split(' ')).each(function() { 
            if (this !== '' && this.substring(0, 3) == "cms") {
                element = this.toString();
            }
        });

        var $t = $(this);
        var offset = $t.offset();
        var dim = {
            left:    offset.left, 
            top:    offset.top, 
            width:    $t.outerWidth(), 
            height:    $t.outerHeight()
        };

        $('<div class="editable-focus"></div>').css({
            position:    'absolute', 
            left:        dim.left + 'px', 
            top:        dim.top + 'px',
            width:        dim.width + 'px',
            height:        dim.height + 'px'
        }).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />');
    });
});

Answer 1

使用此代码，您的按钮HTML最终会字面上

<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />

根据您的描述，它应该类似于

<input type="button" value="Edit" class="edit-btn" onclick="edit_area('some_id')" />

但话说再说一遍，你的可编辑div没有id，所以当前的HTML也无法使用。

除此之外，您的问题是，通过编写element，您实际上引用了window.element，它返回分配给它的最后一个值。

这是一个修复：

$('.editable').each(function(index) { 
    var element; // ADD THIS TO MAKE element A LOCAL VARIABLE

    // [...]

    var $button = $('<input type="button" value="Edit" class="edit-btn" />');
    $('<div class="editable-focus"></div>').css({
        position:    'absolute',
        left:        dim.left + 'px',
        top:        dim.top + 'px',
        width:        dim.width + 'px',
        height:        dim.height + 'px'
    }).appendTo(document.body).append($button);

    // And now you can write your event handler without fuss like this:
    $button.click(function() { alert(element); });

<强> See it in action

Answer 2

您需要插入“element”的值而不是变量本身的变量。这就是为什么每次都看到最终值“cms-block-3”。

变化：

onclick="edit_area(element)"

要：

onclick="edit_area(\"'+element+'\")"

Answer 3

您必须将element变量的内容而不是变量本身添加到输入中：

}).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(\''+element+'\')" />');

因为元素变量将始终是循环中最后一个元素的值。（你不应该通过在其声明前面省略var来将它定义为全局变量）

Answer 4

在您的代码中。

元素是一个全局对象。然后，您使用onclick =“edit_area（element）”创建了按钮。

因此，每当您单击该按钮时，浏览器都会将全局对象元素传递给该函数。但元素获得了您在迭代中分配的最后一个值。

Answer 5

首先，你没有声明element所以它是一个全局变量。

其次：

'<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />'

只是一个字符串，它不知道您正在创建它的上下文，因此将在全局上下文中调用edit_area(element)。这方便不会引发错误，因为您忘记声明element并且它是一个全局变量，所以它使用它。

替换为：

.append($('<input>', {
    type: "button",
    val: "Edit",
    'class': "edit-btn",
    click: function () {
        edit_area(element);
    }
}));

并声明element

$('.editable').each(function(index) {
    var element;
....

Answer 6

这里的问题是，对于每个输入，onlick处理程序等于“edit_area（element）”

元素是一个变量，因此它只有一个值（即：它给出的最后一个值）

你想在这里做的是传递元素的值，而不是对变量的引用。

$('<div class="editable-focus"></div>').css({
            position:    'absolute', 
            left:        dim.left + 'px', 
            top:        dim.top + 'px',
            width:        dim.width + 'px',
            height:        dim.height + 'px'
        }).appendTo(document.body).append('<input type="button" value="Edit"   class="edit-btn" onclick="edit_area(\'' + element +'\')" />');

这个纠正后的代码可以解决问题。

至于你上面的评论，我的猜测是你的函数edit_area不希望字符串作为输入，但是可能需要DOM元素或jQuery对象？

根据您要修改代码的位置，有几种修复方法。解决这个问题的最简单方法是根据我们作为参数赋予函数的css类来检索dom元素。

因此，在edit_area函数的开头添加：

var myElement = $('.' + element);

每个函数中的jQuery onclick事件

6 个答案: