jQuery 数学初学者

Question

大家！ 我有一个非常初级的问题，关于我应该知道的事情，但我就在我现在的位置:(

我理解我想做的事情的逻辑，但我缺乏如何在 jQuery 中编写数学部分的知识。

有人可以教我怎么写吗？

    // 这不是代码，这是我用英语描述的
    // 创建基本模式
    字符串=#li-a
    字符串=#li-b
    字符串=#li-c
    // 这是正确的吗？这些应该是字符串吗？
    
    // 添加将要修改的变量默认值
    变量 a = 1
    变量 b = 2
    变量 c = 3
    // 这是正确的吗？
    
    // 写出模式如何被修改
    单击按钮 1 将 .act 添加到 #li-a+0、#li-b+0、#li-c+0
    单击按钮 2 将 .act 添加到 #li-a+1、#li-b+1、#li-c+1
    单击按钮 3 将 .act 添加到 #li-a+2、#li-b+2、#li-c+2
    单击按钮 4 将 .act 添加到 #li-a+0、#li-b+3、#li-c+1
    // 我知道如何编写 addClass 但我不知道如何实现 ''c+1'' 等部分

这是我想要实现的目标的模板：

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

Answer 1

您可以使用模板文字将

a+N

、

b+N

和

c+N

替换为选择器字符串。

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