Question

我使用wp cms在php上滑动幻灯片。在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

如果点击了链接，那么很好 - 用户将导航到网址，如果没有，您可以按如下方式导航到网址：

$(".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>

Answer 2

您可以尝试以下操作：

<li onclick="window.location.href='<?php the_sub_field( 'url' ); ?>'">

希望有所帮助：）

使整个li成为js的链接

2 个答案: