Question

至于上下文，在我的页面中，当我点击标签时，它会过滤掉并显示与点击的标签相对应的帖子，从这里我需要处理分页以转到下一组帖子。

但我在这里使用jQuery与javascript if语句进行了争吵，我没有设法区分点击标记和点击下一个按钮转到下一页。

除此之外，我点击标签或下一个按钮，我需要始终抓取相同的变量$clickTag，$catName，$page

仅当我点击标签名称和

时，

$clickTag值才会更改仅当我点击下一个按钮

时，

$page值才会更改

在我目前的情况下，第一部分正常工作if点击标签但第二部分else没有，我想抓取页码，而是抓住它文本并将其存储在$clickTag变量...

中

＆＃13;

(function($) {
  $doc = $(document);

  $doc.ready(function() {
    var $container = $('#main');
    var $pagePosts = $container.find('article');
    var $postNav = $('nav');
    var $status = $('.ajax_tag');
    var $catName = "";
    var $name = "";
    var $page = "1";
    var $clickTag = "";

    $("a[rel='tag']").addClass("tag");
    $pagePosts.wrapAll("<span class='my_container'></span>");

    var $myContainer = $('.my_container');

    $container.on('click', "a[rel='tag'], .pagination a", function(tag) {
      event.preventDefault();
      if ($('.tag')) {
        $clickTag = $(tag.target).text();
        getCatName($name);
        $page = "1";
      } else {
        $clickTag = $(tag.target).text();
        getCatName($name);
        $page = parseInt($this.attr('href').replace(/\D/g, ''));
      }

      $params = {
        'tag': $clickTag,
        'cat': $catName,
        'page': $page,
      };

      get_posts($params);
    });
  });
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <span class="my_container">
      <article id="post-4996" class="post-4996 post type-post status-publish format-standard hentry category-mdu_news tag-dog">
        <header class="entry-header">MDU_TEST		
          <a href="http://192.168.33.10/mdu_test/mdu_news/4996" rel="bookmark">MDU – allez un petit dernier pour la route</a>
          <div id="ajax_tag">TAGS:<a href="http://192.168.33.10/tag/dog" rel="tag" class="tag">dog</a>
            <div class="MDU_TEST"></div>
          </div>
        </header>
      </article>
      <article id="post-4994" class="post-4994 post type-post status-publish format-standard hentry category-mdu_news tag-cat tag-dog">
        <header class="entry-header">MDU_TEST		
          <a href="http://192.168.33.10/mdu_test/mdu_news/4994" rel="bookmark">MDU – vu que j’ai pas mal de tags je dois faire beaucoup de posts…</a>
          <div id="ajax_tag">TAGS:<a href="http://192.168.33.10/tag/cat" rel="tag" class="tag">cat</a>, <a href="http://192.168.33.10/tag/dog" rel="tag" class="tag">dog</a>
            <div class="MDU_TEST"></div>
          </div>
        </header>
      </article>
    </span>
    <nav class="navigation pagination" role="navigation">
      <h2 class="screen-reader-text">Posts navigation</h2>
      <div class="nav-links">
        <span class="page-numbers current">
          <span class="meta-nav screen-reader-text">page </span>1
        </span>
        <a class="page-numbers" href="http://192.168.33.10/category/mdu_test/page/2">
          <span class="meta-nav screen-reader-text">page </span>2</a>
        <a class="page-numbers" href="http://192.168.33.10/category/mdu_test/page/3"><span class="meta-nav screen-reader-text">page </span>3</a>
        <a class="next page-numbers" href="http://192.168.33.10/category/mdu_test/page/2">next page</a>
      </div>
    </nav>
  </main>
</div>

＆＃13;

Answer 1

也许最好检查点击元素的类名。当你执行$ ('.tag')时，它会检查整个页面，而不仅仅是$container中的元素。

此外，如果您要访问要传递给Click事件的函数中当前选定的元素，请使用$(this)代替$this或$(tag.target)。这是您的$page变量为空/未定义的主要原因。此函数的第一个参数是event，而不是所选元素。（jquery.on()）

(function($) {
  $doc = $(document);

  $doc.ready(function() {
    var $container = $('#main');
    var $pagePosts = $container.find('article');
    var $postNav = $('nav');
    var $status = $('.ajax_tag');
    var $catName = "";
    var $name = "";
    var $page = "1";
    var $clickTag = "";

    $("a[rel='tag']").addClass("tag");
    $pagePosts.wrapAll("<span class='my_container'></span>");

    var $myContainer = $('.my_container');

    $container.on('click', "a[rel='tag'], .pagination a", function(event) {
      event.preventDefault();
      if ( $(this).hasClass('tag') ) {
        $clickTag = $(this).text();
        //getCatName($name);
        $page = "1";
      } else {
        $clickTag = $(this).text();
        //getCatName($name);
        $page = parseInt($(this).attr('href').replace(/\D/g, ''));
      }

      $params = {
        'tag': $clickTag,
        'cat': $catName,
        'page': $page,
      };

      console.log($params)

      //get_posts($params);
    });
  });

if语句中的JQuery选择器

1 个答案: