1

我是一位经验丰富的开发人员，对 Jquery 不熟悉。我遇到了一个问题，我的代码在链接在一起时有效，但在分开时无效，我想了解 Jquery 行为。

我有一个<div>带有 4 个按钮的按钮。当按下 4 个按钮中的一个时，我需要所有 4 个按钮都消失并用一个新按钮替换它（新按钮是一个与按下的按钮具有相同值但具有不同 CSS 以使其看起来不同的按钮）

按下按钮时，我<div>像这样清除

$(this).parent().empty();

然后我建立了我想插入的新按钮

var splitstr = event.target.id.split('-');
var pick = splitstr[0];
var position_id = splitstr[1];
var singlebutton = '<button class="pick' + pick + ' pickbutton-box btn btn-primary btn-large madepick" name="pick" ' + 'id="made'+ position_id + '" ' + 'value="' + pick + '">' + pick + '</button>';

然后我尝试将其重新插入父级：

$(this).parent().append(singlebutton);

当我这样做时，所有 4 个按钮<div>都被删除，但没有添加新按钮。但是，如果我在做空和追加之前建立字符串

var singlebutton = " ---- HTML CODE for button ---- "
$(this).parent().empty().append(singlebutton);

一切都按预期工作。这对我来说似乎没有任何意义。有人可以解释发生了什么。

4

1 回答 1

0

你说你有这样的事情：

<div>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
</div>

和这样的事件处理程序：

$('div button').click(function() {
   $(this).parent().empty();
   // etc
});

当您的处理程序代码运行时，this指向单击的按钮，该按钮由$(this).parent().empty();. 您需要保存对父 div 的引用以便以后能够引用它，因为this它将变为空。像这样的东西：

$('div button').click(function() {
   var div = $(this).parent().empty();
   // cannot use 'this' anymore below this point
   div.append('something');
});

链式版本有效，因为对父元素的引用是从 开始提前传递的.parent，而 的值this变得无关紧要。

于 2012-12-11T21:26:07.103 回答