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（）//总是返回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

1 个答案: