JQuery selectors within if statements

Question

As for context, in my page when i click on a tag it filters out and shows the posts corresponding to the clicked tag, from here i need to handle pagination to go to the next bunch of posts.

But I'm struggling with the javascript if statement here with jQuery, where i don't manage to differentiate the click on tag and the click on the next button to go to next page.

On top of that whereas i click on the tag or the next button i need to always grab the same variables $clickTag,$catName,$page

$clickTag value changes only if I click on the tag Name and

$page value changes only if i click on the next button

In my current situation the first part is working properly if when clicking on a tag but the second part else doesn't, i want to grab the page number, but instead it grab the text and store it in the $clickTag variable…

(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);

<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>

Answer 1

Maybe it's better to check the class names of the clicked element. Cause when you do $('.tag') it checks the whole page , not just the elements inside $container.

Also if you would like to access the currently selected element within the function that is being passed to click event , use $(this) instead of $this or $(tag.target). That was the main reason why your $page variable was empty/undefined. Also the first parameter of this function is event, not the selected element. (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);
    });
  });