使用 2 个或更多链接使 DIV 可点击

Question

我在使用 jQuery 时遇到了一些困难。 我需要 ma div或section可点击（添加块元素的链接）并且我已经实现了一些代码

$(document).ready(function() {
        $(".clickable").click(function(){
            window.location=$(this).find("a.slide-link").attr("href");
            return false;
        });
    });

但是当块有 2 个或更多链接时 - 此块中的链接无法正常工作。 始终重定向到a.slide-link url。

我该如何解决这个问题？ 谢谢！

更新

<section class="clickable">
    <div>
        <div class="description">
            <ul>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum <a href="http://url1.com">here</a></li>
            </ul>
        </div>
        <a class="slide-link" href="http://url2.com">URL2</a>
    </div>
</section>

Answer 1

初始问题的初始答案

在多个匹配的情况下， $(this).find("a.slide-link") 给出节点数组，因此， .attr不起作用。

如果您想重定向到第一个链接，请将您的代码更新为

$($(this).find("a.slide-link")[0])

更新问题的更新答案

由于事件冒泡，您在该部分中的锚点将不起作用。 供参考 - http://www.w3schools.com/jsref/event_bubbles.asp

你要做的就是阻止事件冒泡。 为此，在您的 js 中添加它

$(".clickable a").click(function(event){
     event.stopPropagation();
});

Answer 2

如果它只是您想要在该部分中工作的链接，而不是单击该部分本身，那么您可以使用以下内容：

$(document).ready(function() {
    $(".clickable a.slide-link").click(function(){
        window.location=$(this).attr("href");
        return false;
    });
});

虽然只有当你打算做一些事情而不是简单地去那个地址时，在这种情况下，上面的代码与没有代码是一样的..

如果您希望外部部分成为链接本身，您最好也使用<a>标签，并将其设置为display: block 。 出于显而易见的原因，您不能在其他锚标记中嵌套锚标记。

Answer 3

我找到了答案

$(".clickable").click(function( event ) {
  var target = $( event.target );
  if ( !target.is( "a" ) ) {
    window.location=$(this).data("link");
  }
}

Answer 4

您可以通过其 href 值$("a[href='www.myurl.com'")选择一个锚点

在此处阅读有关选择器的更多信息。 javascript 使用与常规 CSS 相同的选择器。 鉴于浏览器支持选择器。 http://www.w3schools.com/cssref/css_selectors.asp