About jquery Click to add CSS and other elements to remove CSS. How to do it?-CodePudding

I have a project that when I click titleA, all blocks of titleA must be added with a yellow style, and when titleB is clicked, a yellow style must be added to the titleB page, and the yellow style of titleA will be removed!

But I don’t know this. How to achieve the effect, I need some help from everyone, thank you.

  $('#js-title1').on('click',function(){
    $('#js-title1').addClass('active'); //點擊到的增加樣式
  　$('#js-title2').removeClass('active') //同層其他元素移除樣式
  })

body {
  padding: 30px;
}

.wrap {
  display: flex;
  margin-bottom: 100px;
}
.wrap .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.wrap-2 {
  display: flex;
}
.wrap-2 .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  display: block;
  width: 50px;
  height: 8px;
  background: #FFEB50;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li>
    <a href="javascript:;"  class="demo" id="js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo" id="js-title2">titleB</a>
  </li>
</ul>

<ul class="wrap-2">
  <li>
    <a href="javascript:;"  class="demo" id="js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo" id="js-title2">titleB</a>
  </li>
</ul>

CodePudding user response：

There are multiple js-title1 & js-title2, do not use ID, consider to use css class name.

  $('.js-title1').on('click',function(){
    $('.js-title1').addClass('active'); //點擊到的增加樣式
  　$('.js-title2').removeClass('active') //同層其他元素移除樣式
  })

  $('.js-title2').on('click',function(){
    $('.js-title2').addClass('active'); //點擊到的增加樣式
  　$('.js-title1').removeClass('active') //同層其他元素移除樣式
  })

body {
  padding: 30px;
}

.wrap {
  display: flex;
  margin-bottom: 100px;
}
.wrap .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.wrap-2 {
  display: flex;
}
.wrap-2 .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  display: block;
  width: 50px;
  height: 8px;
  background: #FFEB50;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li>
    <a href="javascript:;"  class="demo js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo js-title2">titleB</a>
  </li>
</ul>

<ul class="wrap-2">
  <li>
    <a href="javascript:;"  class="demo js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo js-title2">titleB</a>
  </li>
</ul>

CodePudding user response：

Other than unique ids you should use ‘event.currentTarget()’ or ‘$(this)’ to refer to the element and can use ‘.toggleClass()’ to toggle classes. This will simplify the code and logic.

CodePudding user response：

IDs must be unique. You can't have more than one on the same page. Perhaps use a data attribute instead. Here's a stripped down example.

// When any title is clicked on
$('.demo').on('click', function() {

  // Get the id from the dataset
  const id = $(this).data('id');

  // Remove all the active classes
  $('.demo').removeClass('active');

  // Add a class to all those elements that
  // have a data-id that matches the id
  $(`[data-id="${id}"`).addClass('active');
});

.active { background: #FFEB50; }
.demo:hover { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>

Additional documentation

Template/string literals

CodePudding user response：

Instead of the id attribute use the class attribute

and in jQuery, get the elements with . instead of #