如何使用 JQuery Fancybox2 将嵌套输入隐藏子项的值获取到自定义内容中

Question

HTML:

<div id="adContainer">
  <a class="iframe"  onclick="viewAd('<?=123?>')">This goes to iframe
     <input class='photo-id' type='hidden' value=123>
     <input class='photo-photo' type='hidden' value='name.jpg'>
  </a>
</div> 
<div id="adContainer">
  <a class="iframe" onclick="viewAd('<?=456?>')" >This goes to iframe
    <input class='photo-id' type='hidden' value=456>
    <input class='photo-photo' type='hidden' value='name2.jpg'>
  </a>
</div>

JQuery/JavaScript:

$(document).ready(function(){
  $("a.iframe").fancybox({
    'height' : '98%',
    'autoScale' : true,
    'transitionIn' : 'elastic',
    'transitionOut' : 'fade',
    'type' : 'iframe',
    'content' : '<div class="customHTML"><h1>'+$(this).children("input.photo-id").attr("value")+'</h1><p><img src="'+$(this).children("input.photo-name").val()+'" alt="'+$(this).children("input.photo-name").val()+'"/></div>'
  });         
});


function viewAd(id){
  alert(id);
  // return "<p>Test</p>";
}

我可以在单个实例中使用它

$("a.iframe input.photo-id").val() //always return 123

，但是当我有多个代码副本时，第一个被插入。

我尝试了以下结果作为评论：

$(this).children("input.photo-id").attr("value")  /// Undefined
$(this).children("input.photo-id").val()        /// Undefined
$(this).children("input.photo-id").valueOf()      /// [Object object]
$(this).children("photo-id").val()              /// Undefined

Answer 1

由于您有多个相同限定条件的实例，因此您需要使用 $.each() 遍历每个元素以获得正确的值。

$("a.iframe").each(function() {
  $(this).fancybox({
    'height' : '98%',
    'autoScale' : true,
    'transitionIn' : 'elastic',
    'transitionOut' : 'fade',
    'type' : 'iframe',
    'content' : '<div class="customHTML"><h1>'+$(this).children("input.photo-id").attr("value")+'</h1><p><img src="'+$(this).children("input.photo-name").val()+'" alt="'+$(this).children("input.photo-name").val()+'"/></div>'
  });
});

如何使用 JQuery Fancybox2 将嵌套输入隐藏子项的值获取到自定义内容中

How to get value of nested input hidden child into custom content using JQuery Fancybox2

javascript

jquery

fancybox-2