使用 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