gpt4 book ai didi

jquery - 在 Fancybox 内输入

转载 作者:行者123 更新时间:2023-12-01 00:59:45 25 4
gpt4 key购买 nike

我在使用 Fancybox 时遇到了一个非常奇怪的问题。

我似乎无法获取 Fancybox 中显示的输入的 .val() 。它们的值为“”。然而,Fancybox 外部的输入是有效的。

我的代码:

<script type="text/javascript">
$(document).ready(function() {
$('a#inline').fancybox({
'hideOnContentClick': false,
'frameWidth': 500,
'frameHeight': $('#avatars').height(),
'callbackOnShow':
function() {

$('#gallery div img').click(function(){
$('#inline img').attr('src', $(this).attr('class'));
$('input#avatar').attr('value', $(this).attr('class'));
});

$('button').click(function(){

console.log($('input#search_avatar'));

return false;
});
}
});
});

和 HTML:

<fieldset>
<div id="avatars" style="float:left; width:500px; display:none;">
<form method="post" action="">
<fieldset>
<input type="text" name="search_avatar" id="search_avatar" />
<button id="search_avatar_submit">Filter</button>
</fieldset>
<div id="gallery">
<div><img src="2_s.jpg" class="2_s.jpg" /></div>
</div>
</form>
</div>
<a id="inline" href="#avatars"><img id="avatar" src="file.png" /></a>

<input type="hidden" name="avatar" value="" id="avatar" />
</fieldset>

基本上就是这样。我点击链接。 Fancybox 出现了。我在输入中添加文本(这是文本),当我单击时,我将得到这个(在 Firebug 中):

[input#search_avatar, input#search_avatar This is text]

当我执行此操作时:

$('#search_avatar').val()

我得到:

""

谢谢!

最佳答案

Fancybox 会创建您要显示的所有元素的副本,并将它们放置到单独的图层中。结果,有两个输入元素,一个是原始元素,另一个是您在 Fancybox 窗口中更改的元素。

这里是the image并有直观的解释。

因此,当您尝试使用以下代码访问“search_avatar”输入值时:

$('#search_avatar').val()

jQuery 返回一个空字符串,因为:

  1. 它选择 id=search_avatar 的所有元素(树中有两个元素。实际上,让两个元素具有相同的 id 是一个坏主意,因此您可能会考虑使用类而不是 id。);
  2. 它返回选择器条件内第一个输入的值(这是第一个具有空值的输入元素)。

要获取位于 Fancybox 窗口中的输入元素的值,您可以简单地扩展 jQuery 表达式:

$('div#fancy_div input#search_avatar')

所以,而不是这个:

$('button').click(function(){

console.log($('input#search_avatar'));

return false;
});

您可以尝试以下代码:

$('button#search_avatar_submit').click(function() {
var searchAvatar = $('div#fancy_div input#search_avatar');
console.log(searchAvatar, searchAvatar.val());
return false;
});

希望这有意义并对您有所帮助。

关于jquery - 在 Fancybox 内输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1482873/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com