通過定位其中的<a>使整個卡片可點擊

我有一些帶有影像、文本和鏈接的卡片。在我的情況下，用錨標簽包裹卡片是不可能的。是否可以定位卡片中的錨標記，然后使用 jquery 使整個卡片可點擊以轉到該鏈接？

理想狀態：當你點擊卡片上的任何地方時，鏈接被觸發，用戶被帶到它。

<div class="todays-news">
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image-2.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

是的，你可以用 JavaScript 來做到這一點，但如果你能解決不能讓卡片成為錨點的問題，那就更好了。沒有理由，你不能把div在一個a元素，a的內容模型是透明的。

但如果你不能：

$(document).on("click", ".card", function(event) {
    const $this = $(this);
    // Don't interfere with a click actually on the anchor
    // (that way, the user can still right-click it and
    // use the browser-supplied menu for oew in new tab,
    // shift click, etc.)
    if ($this.find($(event.target).closest("a")[0]).length === 0) {
        // Not on the anchor, do it
        event.preventDefault();
        $this.find("a")[0].click();
    }
});

請注意，您必須呼叫clickDOM 元素，而不是 jQuery 物件。如果在 jQuery 物件上呼叫它，則不會觸發默認操作。

uj5u.com熱心網友回復：

只需在 上使用onclick處理程式div：

<div class="todays-news">
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card" onclick="this.querySelector('a').click(); return true;">
                  <img src="images/home/home-image.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
            <div class="item" onclick="this.querySelector('a').click(); return true;">
                <div class="card">
                  <img src="images/home/home-image-2.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.org/">Continue Reading</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

為卡片添加一個點擊處理程式，并讓它在錨點上執行點擊：

$(".card").click(function() {
  $(this).find("a")[0].click();
});

uj5u.com熱心網友回復：

你可以用 包裹塊元素<a>。它是有效的 HTML5 并呈現您的卡片可點擊。但是，您可能需要為此塊內的文本調整 css 規則。

編輯：由于這在您的情況下是不可能的，您能具體說明原因嗎？

<div class="todays-news">
<div class="container">
    <div class="owl-carousel owl-theme">
        <a class="item" href="https://www.example.com/">
            <div class="card">
              <img src="images/home/home-image.png" />
              <div class="card-body">
                <strong>This is a title</strong>
                <p>This is a paragraph.</p>
                <a>Continue Reading</a>  <!-- unsure about the correct tag here -->
              </div>
            </div>
        </a>
        <a class="item" href="https://www.example.com/">
            <div class="card">
              <img src="images/home/home-image-2.png" />
              <div class="card-body">
                <strong>This is a title</strong>
                <p>This is a paragraph.</p>
                <a>Continue Reading</a> <!-- unsure about the correct tag here -->
              </div>
            </div>
        </a>
    </div>
</div>
</div>

標籤：javascript html 查询

上一篇：使用引導驗證重置整個表單

下一篇：檢測div上的css屬性以更改其他div屬性