使用jQuery成功后切换图标的可见性

Question

奇怪的事情。我有一些动态创建的表单，其中我在提交按钮附近插入唯一的 id span，如下所示：

"<span id="successful_insert"+ obj.models[i].id +""  style="display: none;" class="glyphicon glyphicon-ok"></span>"

HTML 中的结果例如是：

<span id="successful_insert466" style="display: none;" class="glyphicon glyphicon-ok"></span>

所以在这种特殊形式下，我得到了id="successful_insert466"

默认情况下，字形图标是隐藏的，因此在点击提交后，我希望该图标显示出来。我使用：

success: function () {
             $("#" + span).fadeIn("slow");
         }

其中span是一个变量，我得到这样的变量：

var form = $(this);
var span = $(form).find('input[name="span_id"]').val();
span = String(span);

关键是字形保持隐藏状态，该功能不起作用。有什么收获？

Answer 1

我认为问题出在下一行。

var span = $(form).find('input[name="span_id"]').val();

您应该用如下所示的单引号将form括起来。

var span = $('form').find('input[name="span_id"]').val();

Answer 2

String(span)的目的是什么？我认为这可能会把它扔掉。 String(span)正在创建一个字符串对象，而不是字符串文字，所以当你把它添加到$("#" + span)时，我认为它可能在jQuery选择器中得到的信息比你想要的要多。尝试删除该行，看看会发生什么。

Answer 3

这是您的选择器表达式的问题：

find('input[name="span_id"]') -> 您正在寻找 name 属性为 'span_id' =>input 类型的元素 不存在这样的元素。所以你要么想用id选择器（#successful_insert466）定位元素，要么包含选择器（[id=successful_insert466]）

$(document).find('span[id=successful_insert466]').fadeIn("slow");
or  $(document).find('#successful_insert466').fadeIn("slow");

例 ： https://jsfiddle.net/DinoMyte/ovtajgok/