jquerystringvariables

Beginner jQuery Math


I have a very beginner question about something I should know, but I am where I am :(

I understand the logic of what I want to do, but I lack the knowledge of how to write addition within the syntax of jQuery.

Can somebody, please show me how to write it?


    // This is not Code, this is me describing it in english
    // Creating the basic pattern
    string = #li-a
    string = #li-b
    string = #li-c
    // Is this correct? Should these be Strings?
    
    // Adding variable default values that will be modified
    var a = 1
    var b = 2
    var c = 3
    // Is this correct?
    
    // writing out how the pattern gets modified
    button-1 click adds .act to #li-a+0, #li-b+0, #li-c+0
    button-2 click adds .act to #li-a+1, #li-b+1, #li-c+1
    button-3 click adds .act to #li-a+2, #li-b+2, #li-c+2
    button-4 click adds .act to #li-a+0, #li-b+3, #li-c+1
    // I know how to write addClass but I don't know how to achieve the ''c+1'' etc part

Here's the template of what I'm trying to achieve:

$(document).ready(function(){

  $("#button-1 a").click(function(e){
    // $("").addClass("act"); how can I write that li-c +1 math?
    e.preventDefault();
  });
  $("#button-2 a").click(function(e){

    e.preventDefault();
  });
  $("#button-3 a").click(function(e){

    e.preventDefault();
  });
  $("#button-4 a").click(function(e){

    e.preventDefault();
  });

});
.page {margin:20px auto;max-width:300px;font-family:arial;}
ul {list-style-type:none;padding:0;margin:0;}
a {text-decoration:none;color:#000;}
.list-wrap {margin-bottom:30px;}
.list {align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:space-between;}
.list a {display:block;padding:7px 15px;background:#eee;border-radius:5px;}
.list .act a {background:#ffb27a;}
.button-wrap {align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:space-between;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="page">
  <div class="list-wrap">
    <ul class="list" id="list">
      <li class="list-item act" id="li-1"><a href="">1</a></li>
      <li class="list-item act" id="li-2"><a href="">2</a></li>
      <li class="list-item act" id="li-3"><a href="">3</a></li>
      <li class="list-item" id="li-4"><a href="">4</a></li>
      <li class="list-item" id="li-5"><a href="">5</a></li>
      <li class="list-item" id="li-6"><a href="">6</a></li>
    </ul>
  </div>
  <div class="button-wrap">
    <div class="button" id="button-1"><a href="">Button 1</a></div>
    <div class="button" id="button-2"><a href="">Button 2</a></div>
    <div class="button" id="button-3"><a href="">Button 3</a></div>
    <div class="button" id="button-4"><a href="">Button 4</a></div>
  </div>
</div>


Solution

  • You can use a template literal to substitute a+N, b+N, and c+N into the selector strings.

    $(document).ready(function() {
      let a = 0;
      let b = 1;
      let c = 2;
    
      function addClasses(increment) {
        $(".list-item").removeClass("act"); // Remove from other items
        $(`#li-${a+increment}, #li-${b+increment}, #li-${c+increment}`).addClass("act"); // Add to these items
      }
    
      $("#button-1 a").click(function(e) {
        addClasses(1);
        e.preventDefault();
      });
      $("#button-2 a").click(function(e) {
        addClasses(2);
        e.preventDefault();
      });
      $("#button-3 a").click(function(e) {
        addClasses(3);
        e.preventDefault();
      });
      $("#button-4 a").click(function(e) {
        addClasses(4);
        e.preventDefault();
      });
    
    });
    .page {
      margin: 20px auto;
      max-width: 300px;
      font-family: arial;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    a {
      text-decoration: none;
      color: #000;
    }
    
    .list-wrap {
      margin-bottom: 30px;
    }
    
    .list {
      align-items: flex-start;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .list a {
      display: block;
      padding: 7px 15px;
      background: #eee;
      border-radius: 5px;
    }
    
    .list .act a {
      background: #ffb27a;
    }
    
    .button-wrap {
      align-items: flex-start;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div class="page">
      <div class="list-wrap">
        <ul class="list" id="list">
          <li class="list-item act" id="li-1"><a href="">1</a></li>
          <li class="list-item act" id="li-2"><a href="">2</a></li>
          <li class="list-item act" id="li-3"><a href="">3</a></li>
          <li class="list-item" id="li-4"><a href="">4</a></li>
          <li class="list-item" id="li-5"><a href="">5</a></li>
          <li class="list-item" id="li-6"><a href="">6</a></li>
        </ul>
      </div>
      <div class="button-wrap">
        <div class="button" id="button-1"><a href="">Button 1</a></div>
        <div class="button" id="button-2"><a href="">Button 2</a></div>
        <div class="button" id="button-3"><a href="">Button 3</a></div>
        <div class="button" id="button-4"><a href="">Button 4</a></div>
      </div>
    </div>