Javascript 动态Jquery代码

我正在寻找一种在Jquery中编写动态代码的方法

请看下面的代码，这里是一个

一切正常，但Jquery代码会重复，而且有点长！ 有没有办法将这个Jquery转换成动态查询

谢谢

JS

$("#link1").click(function(){
    $("#table-filters>ul>li.red").removeClass("red");
  $(".link1").addClass('red');
});
$("#link2").click(function(){
    $("#table-filters>ul>li.red").removeClass("red");
  $(".link2").addClass('red');
});
$("#link3").click(function(){
    $("#table-filters>ul>li.red").removeClass("red");
  $(".link3").addClass('red');
});
$("#link4").click(function(){
    $("#table-filters>ul>li.red").removeClass("red");
  $(".link4").addClass('red');
});
$("#link5").click(function(){
    $("#table-filters>ul>li.red").removeClass("red");
  $(".link5").addClass('red');
});

HTML

<div id="table-filters">
    <ul>
        <li class="link1">link 1</li>
        <li class="link2">link 2</li>
        <li class="link3">link 3</li>
        <li class="link4">link 4</li>
        <li class="link5">link 5</li>
    </ul>
</div>
<p>
<button id="link1">link1 Button</button>
<button id="link2">link2 Button</button>
<button id="link3">link3 Button</button>
<button id="link4">link4 Button</button>
<button id="link5">link5 Button</button>
</p>

CSS

.red {
  color: red;
}
li {
  float:left;
  margin-right: 10px
}
p {
  float: left;
  width: 100%;
  margin-top: 50px;
}
button {
  corsor: pointer;
}

JS
$（“#link1”）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“.link1”）.addClass（'red'）；
});
$（“#link2”）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“.link2”）.addClass（'red'）；
});
$（“#link3”）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“.link3”）.addClass（'red'）；
});
$（“#link4”）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“.link4”）.addClass（'red'）；
});
$（“#link5”）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“.link5”）.addClass（'red'）；
});
HTML

链接1
链接2
链接3
链接4
链接5


链接1按钮
链接2按钮
链接3按钮
链接4按钮
链接5按钮

CSS
瑞德先生{
颜色：红色；
}
李{
浮动：左；
右边距：10px
}
p{
浮动：左；
宽度：100%；
边缘顶部：50px；
}
钮扣{
指针；
}

JS
//使用一个类来捕获点击，会更加动态
$（“.link”）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“+$（this.attr（“id”））.addClass（'red'）；
});
HTML

链接1
链接2
链接3
链接4
链接5


链接1按钮
链接2按钮
链接3按钮
链接4按钮
链接5按钮

因为您的按钮的ID和链接的类名称相同，所以您可以使用它们来添加链接中的

红色类或删除链接中的
红色类

堆栈片段


$（“#按钮”）。在（'click'，function（）上{
$（“#表过滤器ul>li”）.removeClass（'red'）；
$（“#表过滤器ul>li[class=”+$（this.attr（'id'）+”）.addClass（'red'）；
})
.red{
颜色：红色；
}
李{
浮动：左；
右边距：10px；
列表样式：无；
}
p{
浮动：左；
宽度：100%；
边缘顶部：50px；
}
钮扣{
光标：指针；
}


链接1
链接2
链接3
链接4
链接5


链接1按钮
链接2按钮
链接3按钮
链接4按钮
链接5按钮
我建议采用以下方法：

// select all elements with an 'id' attribute whose value
// begins with 'link':
$('button[id^=link]')

  // bind the anonymous function of the on() method as
  // as the event-handler for the 'click' event:
  .on('click', function() {

    // finding the <li> elements with a class equal to the
    // id of the clicked <button> element, contained within
    // the #table-filters element:
    $('#table-filters li.' + this.id)

      // add the 'red' class to that element:
      .addClass('red')

      // select the siblings of that <li> element:
      .siblings()

      // remove the 'red' class from those sibling <li> elements:
      .removeClass('red');
});

.red{
颜色：红色；
}
李{
浮动：左；
右边距：10px；
列表样式类型：无；
}
p{
浮动：左；
宽度：100%；
边缘顶部：50px；
}
钮扣{
光标：指针；
}


链接1
链接2
链接3
链接4
链接5


链接1按钮
链接2按钮
链接3按钮
链接4按钮
链接5按钮
当然，您可以使用
.each（）
迭代节点，并使用动态选择器为必要的元素设置类。以下是JSFIDLE：

还有这个片段：


$（“按钮”）。每个（功能（i，项）{
$（项）。单击（函数（）{
$（“#表过滤器>ul>li.red”）.removeClass（“red”）；
$（“.link”+（i+1））.addClass（'red'）；
});
});
.red{
颜色：红色；
}
李{
浮动：左；
右边距：10px；
列表样式：无；
}
p{
浮动：左；
宽度：100%；
边缘顶部：50px；
}
钮扣{
光标：指针；
}


链接1
链接2
链接3
链接4
链接5


链接1按钮
链接2按钮
链接3按钮
链接4按钮
链接5按钮
非常感谢商业自杀，大卫·托马斯、布万·巴特和约翰·史密斯！嗯，有很多方法可以让它工作。你们都太棒了！如果我能接受每一个答案，我会接受的！
// select all elements with an 'id' attribute whose value
// begins with 'link':
$('button[id^=link]')

  // bind the anonymous function of the on() method as
  // as the event-handler for the 'click' event:
  .on('click', function() {

    // finding the <li> elements with a class equal to the
    // id of the clicked <button> element, contained within
    // the #table-filters element:
    $('#table-filters li.' + this.id)

      // add the 'red' class to that element:
      .addClass('red')

      // select the siblings of that <li> element:
      .siblings()

      // remove the 'red' class from those sibling <li> elements:
      .removeClass('red');
});