1

I have three rows of button, I want to add text of button to array (firstRowArr, secondRowArr, thirdRowArr). If firstRowArr bigger then secondRowArr and thirdRowArr, secondRow and thirdRow's button can be selected only one. If secondRowArr if bigger than firstRowArr and secondRowArr, firstRowArr and thirdRowArr can be selected only one. And the third case is the same as case one and case two.

##index.html

    <div class="row">
        <div class="col d-flex justify-content-between" id="firstRow">
          <button class="ball">0</button>
          <button class="ball">1</button>
          <button class="ball">2</button> 
          <button class="ball">3</button>    
        </div>
    </div>
    <div class="row">
      <div class="col d-flex justify-content-between" id="secondRow">
        <button class="ball-second">0</button>
        <button class="ball-second">1</button>
        <button class="ball-second">2</button>
        <button class="ball-second">3</button>    
      </div>
    </div>
   <div class="row">
        <div class="col d-flex justify-content-between" id="thirdRow">
          <button class="ball-third">0</button>
          <button class="ball-third">1</button>
          <button class="ball-third">2</button>
          <button class="ball-third">3</button>
        </div>
      </div>

##script.js

var firstRowArr = [];
var secondRowArr = [];
var thirdRowArr = [];

$('.ball').each(function () {
        $(this).click(function () {
          $(this).toggleClass('active-ball');
                if($(this).hasClass('active-ball')) {
                  firstRowArr.push($(this).text());
                  if(firstRowArr.length >=2){
                    // button in secondRow and thirdRow can be selected only one button
                  }
                 
                }
                     
        });
    });
    
    $('.ball-second').each(function () {
        $(this).click(function () {
            $(this).toggleClass('active-ball');
                if($(this).hasClass('active-ball')) {
                  secondRowArr.push($(this).text());
                  if(secondRowArr.length >=2){
                    // button in firstRow and thirdRow can be selected only one button
                    }
    
                }  
       
        });
    });

    $('.ball-third').each(function () {
        $(this).click(function () {
            $(this).toggleClass('active-ball');
                if($(this).hasClass('active-ball')) {
                  thirdRowArr.push($(this).text());
                  if(thirdRowArr.length >=2){
                    // button in firstRow and secondRow can be selected only one button
                    }
    
                }
                  
       
        });
    });
Improve this question

1 Answer 1

Reset to default
1

You could do it like this:

$('.ball').click(function() {
  $(this).toggleClass('active-ball');
  if ($(this).hasClass('active-ball')) {
    if (mainRowArr == "" || mainRowArr == $(this).parent().attr("id") || firstRowArr.length < 1) {
      firstRowArr.push($(this).text());
      if (firstRowArr.length >= 2) mainRowArr = $(this).parent().attr("id")
    }
  } else {
    var index = firstRowArr.indexOf($(this).text());
    if (index !== -1) {
      firstRowArr.splice(index, 1);
    }
  }
  console.log("firstrow: " + firstRowArr + " - Secondrow: " + secondRowArr + " - thirdrow: " + thirdRowArr);
});

Now you could add some code that would disabled none selected buttons.

Demo

var firstRowArr = [];
var secondRowArr = [];
var thirdRowArr = [];
var mainRowArr = "";

$('.ball').click(function() {
  $(this).toggleClass('active-ball');
  if ($(this).hasClass('active-ball')) {
    if (mainRowArr == "" || mainRowArr == $(this).parent().attr("id") || firstRowArr.length < 1) {
      firstRowArr.push($(this).text());
      if (firstRowArr.length >= 2) mainRowArr = $(this).parent().attr("id")
    }
  } else {
    var index = firstRowArr.indexOf($(this).text());
    if (index !== -1) {
      firstRowArr.splice(index, 1);
    }
  }
  console.log("firstrow: " + firstRowArr + " - Secondrow: " + secondRowArr + " - thirdrow: " + thirdRowArr);
});
$('.ball-second').click(function() {
  $(this).toggleClass('active-ball');
  if ($(this).hasClass('active-ball')) {
    if (mainRowArr == "" || mainRowArr == $(this).parent().attr("id") || secondRowArr.length < 1) {
      secondRowArr.push($(this).text());
      if (secondRowArr.length >= 2) mainRowArr = $(this).parent().attr("id")
    }
  } else {
    var index = secondRowArr.indexOf($(this).text());
    if (index !== -1) {
      secondRowArr.splice(index, 1);
    }
  }
  console.log("firstrow: " + firstRowArr + " - Secondrow: " + secondRowArr + " - thirdrow: " + thirdRowArr);
});

$('.ball-third').click(function() {
  $(this).toggleClass('active-ball');
  if ($(this).hasClass('active-ball')) {
    if (mainRowArr == "" || mainRowArr == $(this).parent().attr("id") || thirdRowArr.length < 1) {
      thirdRowArr.push($(this).text());
      if (thirdRowArr.length >= 2) mainRowArr = $(this).parent().attr("id")
    }
  } else {
    var index = thirdRowArr.indexOf($(this).text());
    if (index !== -1) {
      thirdRowArr.splice(index, 1);
    }
  }
  console.log("firstrow: " + firstRowArr + " - Secondrow: " + secondRowArr + " - thirdrow: " + thirdRowArr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col d-flex justify-content-between" id="firstRow">
    <button class="ball">0</button>
    <button class="ball">1</button>
    <button class="ball">2</button>
    <button class="ball">3</button>
  </div>
</div>
<div class="row">
  <div class="col d-flex justify-content-between" id="secondRow">
    <button class="ball-second">0</button>
    <button class="ball-second">1</button>
    <button class="ball-second">2</button>
    <button class="ball-second">3</button>
  </div>
</div>
<div class="row">
  <div class="col d-flex justify-content-between" id="thirdRow">
    <button class="ball-third">0</button>
    <button class="ball-third">1</button>
    <button class="ball-third">2</button>
    <button class="ball-third">3</button>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.