Jquery链式编程

打酱油的坑比

于 2022-04-19 18:25:20 发布

阅读量657

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_53816315/article/details/124280354

版权

Jquery链式编程

效果：当你点击哪个小li的时候，哪个小li变换类名，其余小li移除类名

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul li {
      border: 1px solid #ccc;
      width: 100px;
      height: 20px;
    }
    .color {
      background-color: skyblue;
      color: #FFF;
    }
  </style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

$('ul li').on('click', function () {
  $(this).addClass('color').siblings().removeClass('color').parent().siblings().children().removeClass('color');
});//点击的元素添加类名，他的兄弟移除类名，他兄弟的父亲的兄弟的孩子移除类名，形成了一条链