Question

如何根据单击的div加载新的URL。每个div都有自己的加载网址（在我的实现中div是博客页面）。

我的JQuery：和我的html：

$('.postWraper').click(() => {
        window.location = $(this).find('h3').find('a').attr('href');
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postWraper">
    <h3 class="postTitleH3">
        <a href="blog/first-page" class="postTitle">
            <%= post.postTitle %>
        </a>
    </h3>
</div>
<div class="postWraper">
    <h3 class="postTitleH3">
        <a href="blog/second-page" class="postTitle">
            <%= post.postTitle %>
        </a>
    </h3>
</div>

当我单击第一或第二个div时，总是将我重定向到第一个URL。我不明白为什么。请帮忙！

Answer 1

meaning of this被更改，因为您使用箭头功能作为事件处理程序。将其更改为常规函数：

$('.postWraper').click(function() {
    window.location = $(this).find('h3').find('a').attr('href');
    return false;
});

Answer 2

您不一定需要更改箭头功能。您仍然可以通过在click事件中传递事件对象并使用e.target.href;获得href值来使其工作：

$('.postWraper').click((e) => {
  window.location = e.target.href;
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postWraper" id="<%= post.id %>">
    <h3 class="postTitleH3">
        <a href="blog/first-page" class="postTitle">
            Some title
        </a>
    </h3>
</div>
<div class="postWraper">
    <h3 class="postTitleH3">
        <a href="blog/second-page" class="postTitle">
            Some title
        </a>
    </h3>
</div>

如何将用户重定向到div上的新页面单击JQuery

2 个答案: