使背景圖片與同一div中的其他鏈接和元素可點擊

Question

現在，下面的代碼生成此處顯示的內容：

當前必須單擊標題才能加載帖子頁面，但是我想允許整個背景圖像都可以單擊。 這可能嗎？ 我嘗試用標題代碼中的標簽將card div包圍起來，但這仍然不能讓我單擊鏈接那樣的背景圖像。

<article id="post-<?php the_ID(); ?>" <?php post_class('card-box col-lg-4 col-md-6 col-sm-12 col-xs-12'); ?>>
    <div class="card" data-background="image" data-src="<?php esc_url( the_post_thumbnail_url( 'large' ) ); ?>">
             <div class="header">
                    <?php
                    $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                    ?>                                                          
                        <div class="category">
                            <h6>
                                <span class="category">
                                    <?php  echo '<a class="category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>'; ?>
                                </span>
                            </h6>
                        </div>
                    <?php } ?>                        
                </div>
                <div class="content">
                    <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
                    <span class="date"><?php echo esc_html( get_the_date() ); ?></span>
                </div>
                <div class="filter"></div>
                </div> <!-- end card -->
        </article>

Answer 1

嘗試如下的jQuery方法

$('.card').on('click', function(event){
  var elementTag = event.target.tagName.toLowerCase();
  if(elementTag === 'div') {
     var pageurl = $(this).find('.entry-title a').attr('href');
     window.location.href = pageurl;
  }
});`