CODEWITHSUNDEEP
javascriptjquery
user2421594
user2421594

Reputation: 81

Do something if element has class

Here is what I want to do...First if you click the "All" li box it adds and removes a red border around all the other boxes. Now I want it so that if a box containing a red border is clicked then simply toggle the class .box-border.

<style>
  .box { width: 100px; height: 100px; background: beige; }
  .box.select-all { background: #333; color: white; }
  .box-border { border: 1px solid red; }
  ul li { 
    display: inline; 
    list-style: none; 
    float: left; 
    margin: 0 5px;
    text-align: center;
    line-height: 100px;
  }
</style>

<div class="row">
  <div class="large-10 push-2 medium-10 columns">
    <ul>
      <li class="box box1"></li>
      <li class="box box2"></li>
      <li class="box box3"></li>
      <li class="box box4"></li>
      <li class="box box5 select-all">All</li>
    </ul>
  </div>
</div>

<script>
  $(document).ready(function(){
    var selectAll = $('.box.select-all');
    var boxes = $('.box').not(selectAll);

    selectAll.click(function(){
      boxes.toggleClass('box-border');

      // if (boxes.hasClass('box-border')) {
      //   console.log('yes');
      // }
    });

    $('ul li').click(function(){
      var item = $(this).index();
      if (item.hasClass('box-border')) {
        console.log('yessssss');
      }
    });
  });
</script>

Upvotes: 1

Views: 844

Answers (2)

Code_Student09
Code_Student09

Reputation: 327

I wrote this (with jQuery) to toggle between two pages upon clicking a button with a class (the class is removed if it is present, and added if it is absent to use the same button (element with the same ID) again),

the order of the method calls and 'innerHTML' property setting does matter in the function (you must make changes to the page(or other changed element) before you make changes to the button (or other event 'triggered' element)), and the order in which you add the 'mPage' class (the triggering class) to the button does not matter.

<script id="toSettings">
const spage = document.getElementById("mContent");
  $( "#setsBtn" ).click(function(){
    if ($(this).hasClass('mPage')) {
        spage.innerHTML = '';

        spage.innerHTML = '<br /><div style="width=100%; height=100%; top=0; left=0; background-color: pink;"> <button class="w3-btn w3-amber" onclick="goso()">dest</button><br /> <button class="w3-btn w3-amber">dest</button><br /><button class="w3-btn w3-amber">dest</button>  </div>';

        this.innerHTML = '<img  src="img/leftarrow.svg"/>'  

        this.classList.remove('mPage');
      } 
        else {

spage.innerHTML='';
spage.innerHTML = '<div style="width: 100%; height: 100%; " id="mContent" class="mContent w3-center"><br /><br /><br /><br /><br /><br /><br /><div id="" class=""><div class="mPageBtn w3-button w3-green" id="ledgerbtn" style="display: block;">Ledger</div><br /></div>';

this.classList.add('mPage');

this.innerHTML = '<img  src="img/gear.svg"/>';
}
});
      
</script>

The 'w3' classes are part of the w3-css library available on w3schools.com .

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You need to use $(this).hasClass('box-border')

As per your code, item will be a integer referring to elements index.

var item = $(this).index();

Modified Code:

$('ul li').click(function(){
  var item = $(this).index();
  if ($(this).hasClass('box-border')) {
    console.log('yessssss');
  }
});

EDIT

If you want to use toggleClass()

$('ul li').click(function(){
  var item = $(this).index();
  $(this).toggleClass('box-border');
});

Upvotes: 3

Related Questions