Question 35537 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

anchor do nothing after second index – Jquery

I have a django-qcm with sections that change when clicking on anchors and using the scroll snap type property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        html{
            scroll-behavior: smooth;
          }
        body{
            background-color: #72a9d6;
            color: white;
            font-family: "Mont", sans-serif;
            overflow: hidden;
        }
        section{
            overflow: hidden;
            height: 100vh;
            /*overflow-y: scroll;*/
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth; 
        }
        .container{ 
            padding: 5%;
            display: grid;
            position: relative;
            justify-items: center;
            gap: 3px;
            scroll-snap-align: center;
            height: 100%;  
        }
        .question_title{
            height: 50px;
            font-size: 25px;
            font-weight: 500;
            text-align: center;
            
        }
        .space_title{
            height: 150px;
        }
        .container_reps{
            max-width: 30%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            column-count:2;
            height: 20%;   
        }
        .rep{
            display: flex;
            align-items: center;
            border:1px solid white;
            padding: 0 5px ;
            max-width: 15%;
            min-width: 250px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 5px;
            margin-bottom: 10px;
            margin-left: 10px;
            max-height: 40px;
        }
        .rep:hover{
            background-color: rgba(255, 255, 255, 0.3);
        }
        .dot_rep{
            background-color: #63c7f5;
            border: 1px solid white;
            color: white;
            margin-right: 7px;
            padding: 5px 10px;
            border-radius: 5px;
        }
        .text_rep{
            font-weight: 700;
        }
        .check{
           margin-left: 40%;
        }
        </style>
        
        
        <section>
               
            <div id="1" class="container">
                <div class="question_title">
                    <div class="space_title"></div>
                    <p>Question 1</p>
                </div>
                <div class="container_reps">
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep 1</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep3</p>
                    </div>               
                </div>
            </div>
        
            <div id="2" class="container">
                <div class="question_title">
                    <div class="space_title"></div>
                    <p>Question 2</p>
                </div>
                <div class="container_reps">
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep 1</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep3</p>
                    </div>              
                </div>
            </div>
        
            <div id="3" class="container">
                <div class="question_title">
                    <div class="space_title"></div>
                    <p>Question 3</p>
                </div>
                <div class="container_reps">
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep 1</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep3</p>
                    </div>               
                </div>
            </div>
            <div id="4" class="container">
                <div class="question_title">
                    <div class="space_title"></div>
                    <p>Question 4</p>
                </div>
                <div class="container_reps">
                    
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep 1</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
                    </div>
                    <div class="rep">
                        <span class="dot_rep">1</span><p class="text_rep">rep3</p>
                    </div>               
                </div>
            </div>
        
        </section>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
             function scrollToAnchor(ind){
        
        const aTag = $("#"+ind);
        $('body,section').animate({scrollTop: aTag.offset().top},'slow');
    }

    //scrollToAnchor('2');

    var container_page = document.getElementsByClassName('container')
    

    const reps = document.getElementsByClassName('rep');
    [].forEach.call(reps,function(rep){
        $(rep).click(function(){
            if(! rep.querySelector('.check')){
                [].forEach.call(reps,function(repToDel){
                    if(repToDel.querySelector('.check')){
                        repToDel.querySelector('.check').remove()
                        $(repToDel).css("border", "1px solid white")
                    }
                })
                $(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
                $(rep).css("border", "2.5px solid white");

               
                    let x = parseInt($(rep).closest('.container').attr('id'))
                    //var y = x.toString()
                    console.log(x)
                    scrollToAnchor(x+1) 
               
                
                

                 
            }
            
        })
    })

        </script>
</body>
</html>

The first anchor works fine, but after the second nothing happens. The function scrollToAnchor(3) works fine when called in the console.
I tried to change different dom parameters to reach the container id and the int and str but nothing changes except errors.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it with this code:

    var container_page = document.getElementsByClassName('container')
 
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps, function(rep) {
  $(rep).click(function() {
    if (!rep.querySelector('.check')) {
      [].forEach.call(reps, function(repToDel) {
        if (repToDel.querySelector('.check')) {
          repToDel.querySelector('.check').remove()
          $(repToDel).css("border", "1px solid white")
        }
      })
      $(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
      $(rep).css("border", "2.5px solid white");

      var x = parseInt($(rep).closest('.container').attr('id'));
      document.getElementById((++x).toString()).scrollIntoView({
        behavior: 'smooth' 
      });

  2. 0

    The problem seems to be that you’re getting the .container id, instead you might use the number of the clicked .rep.

    Try something like this:

    let x = parseInt($(rep).index()) + 1
    Login or Signup to reply.
  3. 0

    You need to clean up your JS, in the link below you can find a solution with js and css with the same need, instagram stroies clone component. check this tutorial entire solution, well coded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search