javascript - 使整个li成为js的链接

Question

我正在使用 wp cms 使用 php 在 slider 上填充幻灯片。在 eash 幻灯片的底部有一个链接。我需要定位每张幻灯片 (li)，当单击 li 内的任何位置时，它应该链接到包含特定幻灯片的链接上的 url。

这是我需要为其编写 js 的标记:

<div class="carousel">
    <?php 
        $i = 1; 
        while( has_sub_fields( 'bottom_content' ) ): 
    ?>
    <li>
        <div class="bottom-thumb">
            <?php if( get_sub_field( 'thumb' ) ) :?><img src="<?php the_sub_field('thumb'); ?>" alt=""><?php endif; ?>
        </div>
        <h6 class="content-type"><?php the_sub_field( 'content_type' ); ?></h6>
        <p class="content-desc">
            <a href="<?php the_sub_field( 'url' ); ?>">
                <?php the_sub_field( 'title' ); ?>
            </a>
        </p>
        <div class="white-arrow"></div>
    </li>
    <?php 

        $i++;
        endwhile; 
    ?>
</ul>

我相信我的 js 应该类似于:

$(".carousel li").click(function(){
    $(this).find("a").attr("href");
    ...
});

Answer 1

如果链接被点击，很好——用户将导航到 url，如果没有，您可以导航到 url，如下所示:

$(".carousel li").click(function(e){
    $(e.target).is('a') || $(this).find('a')[0].click();
});

$(".carousel li").click(function(e){
        $(e.target).is('a') || $(this).find('a')[0].click();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="carousel">
  <ul>
    <li>
        <div class="bottom-thumb">No Link
            <?php if( get_sub_field( 'thumb' ) ) :?><img src="<?php the_sub_field('thumb'); ?>" alt=""><?php endif; ?>
        </div>
        <h6 class="content-type"><?php the_sub_field( 'content_type' ); ?></h6>
        <p class="content-desc">
            <a href="/">
                Link
            </a>
        </p>
        <div class="white-arrow"></div>
    </li>
</ul>
  </div>
</div>