Javascript 如何调用子锚点单击父div单击

我有多个

<div class="picOuterDiv">
   <a href="examplepage.php?var=1" class="iframe" > page one </a>
</div>

<div class="picOuterDiv">
   <a href="examplepage.php?var=2" class="iframe" > page two </a>
</div>

我想要的是在单击父div时打开颜色框。单击div时，我使用以下代码触发锚元素href，但显然单靠href是不够的，单击的元素应该有类“iframe”。所以它不适用于此代码

$('.picOuterDiv').each(function(){
        $(this).on('click', function(){
            location.href = $(this).find('a').attr('href');
        });
});

有人能帮我做这件事吗？我希望问题是清楚的。先谢谢你

更新：

你的小提琴有几个问题。第一个“var arr[]”不正确。第二，超链接没有任何属性，因此触发单击不会有多大作用。您需要获取它的href属性

演示：

你的小提琴有几个问题。第一个“var arr[]”不正确。第二，超链接没有任何属性，因此触发单击不会有多大作用。您需要获取它的href属性

---

演示：

这对我来说很有效。正如我所说，我使用的是jquery colorbox

$(".picOuterDiv").click(function () {
   var anchorHref = $(this).find('a').attr('href');
   $(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});

---

这就是我的工作。正如我所说，我使用的是jquery colorbox

$(".picOuterDiv").click(function () {
   var anchorHref = $(this).find('a').attr('href');
   $(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});

---

下面的答案是，或者使用CSS让你的锚填充整个div。你能看到js小提琴吗？我已经编辑了这个问题参见Christophe的答案，它是唯一正确的答案，尽管+1。他还提到了var arr[]，我看到它仍然在你的代码中。下面的答案是，或者使用CSS让你的锚填充整个div。你能看到js小提琴吗？我已经编辑了这个问题参见Christophe的答案，它是唯一正确的答案，尽管+1。他还提到了var arr[]，我看到它仍然在你的代码中。什么，超链接没有任何onclick行为？你认为它有什么作用？@popleak我在回答中添加了一个参考，为了清楚起见，我将“行为”改为“属性”。我们在这里讨论的是JavaScript，而不是html。试着用其他答案来理解我的意思。。让我想想。事实上我要试试。。。是的，除了你，每个人都错了。事实上，触发点击子泡泡备份，然后触发点击。。。最大调用堆栈大小超过了我最初的方法@christophe。但该代码的问题在于它确实遵循了链接。但不会打开颜色盒弹出窗口。正如我所提到的，我正在使用jQuery colorbox插件。@jinni可以，但您获取href的原始代码不正确。我看到您现在已经在最终代码中修复了它。什么，超链接没有任何onclick行为？你认为它有什么作用？@popleak我在回答中添加了一个参考，为了清楚起见，我将“行为”改为“属性”。我们在这里讨论的是JavaScript，而不是html。试着用其他答案来理解我的意思。。让我想想。事实上我要试试。。。是的，除了你，每个人都错了。事实上，触发点击子泡泡备份，然后触发点击。。。最大调用堆栈大小超过了我最初的方法@christophe。但该代码的问题在于它确实遵循了链接。但不会打开颜色盒弹出窗口。正如我所提到的，我正在使用jQuery colorbox插件。@jinni可以，但您获取href的原始代码不正确。我看到您现在已经在最终代码中修复了它。

$(".picOuterDiv").click(function () {
   var anchorHref = $(this).find('a').attr('href');
   $(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});