Question

我是一名经验丰富的开发人员，他是Jquery的新手。我遇到了一个问题，我的代码在链接在一起时有效，但不是在它是独立的时候，我想了解Jquery的行为。

我有一个<div>，里面有4个按钮。当按下4个按钮中的一个时，我需要全部4个按钮消失，并且需要一个新按钮来替换它（新按钮是一个按钮，其值与按下的按钮相同但具有不同的CSS以使其看起来不同）< / p>

按下按钮时，我会像这样清除<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);

当我执行此操作时，<div>中的所有4个按钮都被删除，但未添加新按钮。但是，如果我在清空之前构建字符串并附加

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

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

Answer 1

你说你有这样的事情：

<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的值变得无关紧要。

Jquery - 与Chaining一起使用但不能分开

1 个答案: