Question

我有以下标记：

<div class="popup">plain old text</div>

<div class="popup_link"><a href="http://link.com">cool link</a></div>

我有以下jQuery：

function show_value( foo ) {
  var value = $('<div class="popup_box">');
  var input = $('<input>');
  input.val(foo.text());
  value.append(input);
  $('body').append(value);
  input.select();
  return value;
}

var init = function(){
  var value;

  $('div.popup').hover(function(){
    value = show_value( $(this) );
  }, function(){
    value.remove();
  }
}

现在，当您将鼠标悬停在＆＃34;普通旧文字＆＃34;上时，您会看到输入带有＆＃34;普通旧文字＆＃34;作为其价值：

<input value="plain old text" />

除了属性href的值之外，我接下来要做的是具有相同的效果。所以：当您将鼠标悬停在链接＆＃34;酷链接＆＃34;上时，您会看到输入＆＃34; http://link.com＆＃34;作为它的价值。

<input value="http://link.com" />

到目前为止，我已经在jquery中添加了这个（新部分添加到底部）：

var init = function(){
  var value;

  $('div.popup').hover(function(){
    value = show_value( $(this) );
  }, function(){
    value.remove();
  }

  var link_value;

  $('div.popup_link').hover(function(){
    link_value = show_value( $(this).find('a').attr('href') );
    // alert( $(this).find('a').attr('href') ); //testing, shows "http://link.com" properly
  }, function(){
    link_value.remove();
  }
}

如您所见，警报工作正常。但是，show_value函数会出错：＆＃34; TypeError：foo.text不是函数＆＃34;

有人能告诉我出错的地方，以及我需要改变的地方吗？谢谢！

Answer 1

问题在于您尝试将string用作DOM object

input.val(foo.text());

您正在将text()方法应用于字符串，导致

$(this).find('a').attr('href')

返回字符串，但不返回DOM object 因此，您需要将show_value()函数更改为其他类似

function show_value( foo ) {
  var value = $('<div class="popup_box">');
  var input = $('<input>');
  input.val(foo);
  value.append(input);
  $('body').append(value);
  input.select();
  return value;
}
$('div.popup_link').hover(function(){
    link_value = show_link_value( $(this).find('a').attr('href') );
 }, function(){
     link_value.remove();
}) //btw here you've missed the bracket

UPD 添加小提琴。 Fiddle

Answer 2

show_value目前正在将jQuery对象作为其参数，但$(this).find('a').attr('href')在调用$('div.popup_link').hover时不是jQuery对象。这就是你收到错误的原因。您可以将参数的含义更改为值：

function show_value( foo ) {
  var value = $('<div class="popup_box">');
  var input = $('<input>');
  input.val(foo);
  value.append(input);
  $('body').append(value);
  input.select();
  return value;
}

然后您对$('div.popup').hover的调用应更改如下：

$('div.popup').hover(function(){
  value = show_value( $(this).text() );
}, function(){
  value.remove();
}

Answer 3

您只需将foo参数放在$()内，就像在$(foo)中一样，将其视为jQuery对象。但是一旦你解决了这个问题，你也会在设置link_value的代码部分遇到错误。你试图在一个普通的字符串上调用jQuery函数，所以你想要做的只是摆脱attr()调用，而是有类似的东西：

$('div.popup_link').hover(function(){
    link_value = show_value( $(this).find('a') );
}, function(){
    link_value.remove();
});

jQuery：选择href attr并在html输入中显示TypeError

3 个答案: