动态Jquery代码

Question

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

请查看下面的代码，这里是live sample

一切都按预期工作，但Jquery代码重复，有点长！ 有没有办法把这个Jquery变成一个dymamic。

谢谢！

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

Answer 1

JS

// a bit more dynamic using a class to capture the click


$(".link").click(function(){
    $("#table-filters>ul>li.red").removeClass("red");
  $("."+$(this).attr("id")).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 class="link" id="link1">link1 Button</button>
<button class="link" id="link2">link2 Button</button>
<button class="link" id="link3">link3 Button</button>
<button class="link" id="link4">link4 Button</button>
<button class="link" id="link5">link5 Button</button>
</p>

Answer 2

因为 按钮的ID 和 链接的类 名称相同，所以您可以将它们用于 添加 或 删除 链接中的red课程。

Stack Snippet

$('#buttons button').on('click', function() {
  $('#table-filters ul>li').removeClass('red');
  $('#table-filters ul>li[class="' + $(this).attr('id') + '"]').addClass('red');
})

.red {
  color: red;
}

li {
  float: left;
  margin-right: 10px;
  list-style: none;
}

p {
  float: left;
  width: 100%;
  margin-top: 50px;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="buttons">
  <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>

Answer 3

我建议采用以下方法：

// 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');
});

$('button[id^=link]').on('click', function() {
  $('#table-filters li.' + this.id).addClass('red').siblings().removeClass('red');
});

.red {
  color: red;
}

li {
  float: left;
  margin-right: 10px;
  list-style-type: none;
}

p {
  float: left;
  width: 100%;
  margin-top: 50px;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用纯JavaScript也可以这样做：

// defining a function to handle the 'highlight' functionality:
function highlight() {

  // using Array.from() to convert the nodeList returned from
  // document.querySelectorAll() into an Array:
  Array.from(

    // finding all the <li> elements within the
    // #table-filters element:
    document.querySelectorAll('#table-filters li')

  // iterating over that Array of nodes using
  // Array.prototype.forEach():
  ).forEach(

    // 'link' is a reference to the current node of the Array
    // of Nodes over which we're iterating;here we access the
    // Element.classList property, and use a ternary operator
    // to determine whether we should use the 'add()' or
    // 'remove()' method:
    link => link.classList[

      // if the classList of the current node ('link') contains
      // a class equal to the id attribute of the clicked (this)
      // <button> we return the 'add' function-name, otherwise
      // we return the 'remove' function-name (using the square-
      // bracket syntax to access properties of the current
      // Object):
      link.classList.contains(this.id) ? 'add' : 'remove'

    // we pass the 'red' string as an argument:
    ]('red')
  )

}

// using Array.from() to convert the nodeList returned by
// document.querySelectorAll() into an Array:
Array.from(

  // here we find all <button> elements with an 'id' attribute
  // whose attribute-value starts with 'link':
  document.querySelectorAll('button[id^=link]')

// iterating over the Array of nodes:
).forEach(

  // 'button' is a reference to the current node of the
  // Array of nodes over which we're iterating; here
  // we use the EventTarget.addEventListener() function
  // to bind the named function ('highlight') as the event-
  // handler for the 'click' event:
  button => button.addEventListener('click', highlight)
);

function highlight() {
  Array.from(
    document.querySelectorAll('#table-filters li')
  ).forEach(
    link => link.classList[link.classList.contains(this.id) ? 'add' : 'remove']('red')
  )

}

Array.from(
  document.querySelectorAll('button[id^=link]')
).forEach(
  button => button.addEventListener('click', highlight)
);

.red {
  color: red;
}

li {
  float: left;
  margin-right: 10px;
  list-style-type: none;
}

p {
  float: left;
  width: 100%;
  margin-top: 50px;
}

button {
  cursor: pointer;
}

<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：
  • Attribute selectors。
• JavaScript的：
  • Array.from()。
  • Array.prototype.forEach()。
  • Arrow function syntax。
  • Element.classList API。
  • EventTarget.addEventListener()。
• jQuery的：
  • addClass()。
  • on()。
  • removeClass()。
  • siblings()。

Answer 4

当然，您可以使用.each()迭代节点和动态选择器来设置必要元素的类。这是jsfiddle：http://jsfiddle.net/kG2AZ/189/

和片段：

$("button").each(function(i, item) {
  $(item).click(function() {
    $("#table-filters>ul>li.red").removeClass("red");
    $(".link"+(i+1)).addClass('red');
  });
});

.red {
  color: red;
}

li {
  float: left;
  margin-right: 10px;
  list-style: none;
}

p {
  float: left;
  width: 100%;
  margin-top: 50px;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="buttons">
  <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>