Question

我正在jQuery中创建一个表单。当页面加载时，我隐藏了所有文本框并尝试用span替换它们。

$("form input:text").each(function(index) {
    $(this).after("<span id='Span_" + $(this).attr("id") + "'>" + $(this).val() + "</span").hide();
});

这会通过每个文本输入在文本框后面放置一个带有与文本框相同的ID但是“span_”附加到开头的文本..

现在我想在跨度上应用悬停：$（“span”）。hover

我想我可以在每个内部完成它或尝试之后应用它（当所有的都已创建）但我不知道如何去实现它

Answer 1

您可以稍微改变它：

$("form input:text").each(function(index) {
  $("<span />", { "id": 'Span_' + this.id, text: $(this).val() })
    .insertAfter(this)
    .hover(function() {
      //do something
    });
  $(this).hide();
});

这使用$(html, props)来创建对象，而不是.after()使用.insertAfter()，这样您的链就会引用创建的元素，因此您可以直接执行任何操作

Answer 2

由于你只是隐藏它们而不是分离它们，所以应该这样做：

$("form input:text").each(function(index) {
    $(this).after("<span id='Span_" + $(this).attr("id") + "'>" + $(this).val() + "</span>").hide();
});
$("form input:text+span").hover(...);

另一种选择是在添加元素之后在循环中使用$(this).next().hover()，如下所示：

$("form input:text").each(function(index) {
    $(this).after("<span id='Span_" + $(this).attr("id") + "'>" + $(this).val() + "</span>").hide().next().hover(...);
});

这可能是一个更好的解决方案，因为您可以单独绑定事件。如果你不需要单独绑定，它会增加不必要的计算。

jquery创建Spans，然后将函数应用于它们

2 个答案: