javascript - 使 div 可点击，仅当 div 中存在 anchor 时(多个 div)

Question

在给定基本结构的情况下，如何将一系列 div 转换为链接而不将每个 div 转换为链接？这是一个例子:

<div class="boxes">
  <div class="box"><p>Some text with a <a href="https://www.google.com">link</a></p></div>
  <div class="box"><p>Some text without a link</p></div>
  <div class="box"><p>Some text with a <a href="https://www.example.com">link</a></p></div>
  <div class="box"><p>Some text without a link</p></div>
</div>

以及我用来使 div 可点击的关联 jQuery:

$(document).ready(function() {

  if($('.boxes p a').length){

    $(".boxes .box").click(function() {
      window.open($(this).find("a").attr("href")); 
      return false;
    });

  }

});

我遇到的问题是点击功能被应用到所有 div，而不是仅仅那些有链接的。

期望的行为是仅在找到 anchor 元素时才创建完全可点击的 div。

出于此用例的目的，div ( .box) 是动态生成的，并且不可能将元素包装在 anchor 标记 (<a href="#"><div> </div></a>) 中。

fiddle :https://jsfiddle.net/fu8xLg0d/

Answer 1

因为您在所有 .boxes .box 类上添加了事件监听器，它们都是您的 div。

只需添加如下内容:

$(".boxes .box").has('a')...

将其缩小到仅包含 a 元素的那些

JSFiddle