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>

我使用的关联jQuery可以使divs可点击：

$(document).ready(function() {

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

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

  }

});

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

所需的行为是仅在找到锚元素时才创建完全可点击的div。

出于本用例的目的，div（.box）是动态生成的，并且无法将该元素包装在锚标记（<a href="#"><div> </div></a>）中。

小提琴：https://jsfiddle.net/fu8xLg0d/

Answer 1

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

只需添加以下内容：

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

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

JSFiddle

Answer 2

使用.parent来解决您的目的：

$(document).ready(function() {

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

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

  }

});

但是，是的，它甚至可以创建一个问题，所以我会说给你的链接一个类，然后调用它的父...：）

Answer 3

Plotisateur刚刚打了我一两分钟！：P

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

以下是代码：https://jsfiddle.net/fu8xLg0d/1/

Answer 4

 You can try this.

  $(document).ready(function() {
  var anchorbox =$(".boxes p a");
  if(anchorbox.length>0){
    $(anchorbox).parent().click(function() {
    window.open($(this).find("a").attr("href")); 
     return false;
    }); 
  }
 });

Answer 5

这一小改动可以帮助您解决问题。

$(document).ready(function() {

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

$(".boxes .box").click(function() {

if ($(this).children('p').children('a').length) {

    window.open($(this).find("a").attr("href")); 
return false;
}

});

}

});

与您的代码的区别在于，另外添加一个检查

if ($(this).children('p').children('a').length) {

    window.open($(this).find("a").attr("href")); 
return false;
}

Answer 6

div（.box）是动态生成的。

将点击事件从body委派给目标div，并在click上委托元素检查是否有锚标记。对于添加指针图标，创建一个单独的函数，只有当它具有锚标记为子时才会将图标添加到div

＆＃13;

$(document).ready(function() {
  // separate function to add pointer only if a is present
  addClassToElem();
  $("body").on('click', '.box', function() {
    if ($(this).find('a').length) {

      window.open($(this).find("a").attr("href"));
      return false;
    }

  })
});

function addClassToElem() {
  $('.box a').each(function(a, b) {
    $(this).parent().addClass('linkIcon')
  })

}

＆＃13;

.linkIcon {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

只有在div中存在锚点时才能使div可点击（多个div）

6 个答案: