如果嵌套div包含锚点,则可点击div

时间:2018-08-06 23:32:11

标签: jquery

在处理现有示例时:

$(".card").click(function() {
    window.location = $(this).find("a").attr("href"); 
    return false;
});

这适用于所有“卡片”实例,但是我有几张没有锚的卡片,这显然是个问题。

我希望仅在分类为“ card-footer”的div中有锚的情况下进行导航。

到目前为止,我已经凑齐了:

$(".features .card").click(function() {
    if ( $(this:has("a.card-footer")) ) {
        window.location = $(this).find("a.card-footer").attr("href");
        return false;
    }
});

这将其范围限定在我需要此事件的显示卡上,但是我还没有找到实际起作用的:has / .find()/。children()的组合。

必须先检查它,因为我的.features卡中确实有没有链接的卡页脚,因此需要这样做以防止出现“未定义”

谢谢。

编辑:拼写

编辑以修复语法,谢谢雅各布:

$(".features .card").click(function() {
    if ($(this).has("a.card-footer")) {
        window.location = $(this).find("a.card-footer").attr("href");
        return false;
    }
});

这仍在拾取页脚中没有锚的卡,从而导致未定义的:/

编辑HTML示例:

https://jsfiddle.net/yg3cz214/

3 个答案:

答案 0 :(得分:2)

您可以在animation: fadeInRight 0.001s ease forwards; 中使用has()函数:

  

将匹配元素集减少为具有与选择器或DOM元素匹配的后代的元素。 https://api.jquery.com/has/

您很简单,则不必检查jquery语句。 if仅在click event具有card元素的情况下执行。

anchor

答案 1 :(得分:1)

您的选择器是a.card-footer。这意味着“具有a类的card-footer元素”。根据您的HTML结构,您真正想要的是“具有一个具有a后代的card-footer类的元素”

$('.features .card').has('.card-footer a').click(function() {
  window.location = $(this).find('.card-footer a').attr('href');
});

答案 2 :(得分:0)

这有效

$('.features .card').has('.card-footer a').click(function() {
      console.log('true');
      window.location = $(this).find('.card-footer a').attr('href');
});

感谢玛瑙和雅各布