How to prevent adding class to more than two element using jquery?

Question

I have table with selectable cells and now I try to prevent selecting more than two cell at once. It should work like that: If I click cell id 4 then it should get class selected if next I click cell id 16 then it also should get class selected but if next I click cell id 20 then cell id 4 should have removed class selected and id 20 should get class selected.
I already have something like that jsfiddle

$(".currency-cell").click(function(){
    if ($(this).hasClass("selected"))
        $(this).removeClass("selected");
    else {
        $(this).addClass("selected");
}).hover(function(){
   $(this).css("background","gold");
},
function(){
    if($(this).hasClass("selected"))
        $(this).css("background","gold");
    else
        $(this).css("background","silver");
});

Mohammad · Accepted Answer · 2016-07-04 22:37:20Z

You need to store id of selected element in array. When td is clicked insert id of it to end of array or if exist in array remove it. If length of array is great than 2 remove first index of array.

var selectedIds = [];
$(".currency-cell").click(function(){
    $(this).toggleClass("selected");

    var id = $(this).attr("id");  
    if (selectedIds.indexOf(id) == -1)
       selectedIds.push(id);
    else   
        selectedIds.splice(selectedIds.indexOf(id), 1);
    
    if (selectedIds.length > 2) {  
        $("#" + selectedIds[0]).removeClass("selected");
        selectedIds.splice(0, 1);
    }       
});

table { 
    width: 200px; 
}
.currency-cell {
    width: 40px;
    height: 40px;
    border: 1px solid silver;
}
.selected { 
    background-color: gold; 
}
.currency-cell:hover { 
    background: gold; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td id="24" class="currency-cell"></td>
        <td id="6" class="currency-cell"></td>
        <td id="4" class="currency-cell"></td>
        <td id="14" class="currency-cell"></td>
    </tr>
    <tr>
        <td id="1" class="currency-cell"></td>
        <td id="7" class="currency-cell"></td>
        <td id="8" class="currency-cell"></td>
        <td id="22" class="currency-cell"></td>            
    </tr>
    <tr>
        <td id="27" class="currency-cell"></td>
        <td id="30" class="currency-cell"></td>
        <td id="28" class="currency-cell"></td>
        <td id="29" class="currency-cell"></td>
    </tr>
</table>

You can test it on full of your html in jsfiddle

Garvit Mangal · Accepted Answer · 2016-07-04 22:36:05Z

You can store the selected elements in array and remove the first element when it's length is 3.

var arr = [];
$(".currency-cell").click(function(){
 var ele = $(this);
    arr.push($(this));
    if(arr.length == 3){
      var preEle = arr.shift();
      preEle.removeClass("selected");
    }
  if(ele.hasClass("selected")) {
        ele.removeClass("selected")
      } else {
        ele.addClass("selected");
    }

}).hover(function(){
   $(this).css("background","gold");
},
function(){
  if($(this).hasClass("selected")){
  	$(this).css("background","gold");
  } else {
  	$(this).css("background","silver");
  }
});

.currency-cell {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 40px 40px;
	border: 1px solid silver;

}
.currency-table {
	width: 560px;
	margin: 0 auto;
	background-color: silver;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;      /* IE 10+ */
  	user-select: none;          /* Likely future */ 
}
.ratio-table {
	margin: 0 auto;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;      /* IE 10+ */
  	user-select: none;          /* Likely future */ 
}
.selected {
	border: 1px solid red;
	background-color: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" style="background-color:white;">
               <table class="currency-table">
               <tr>
                    <td id="24" class="currency-cell mirror"> </td>
                    <td id="6" class="currency-cell exalted"> </td>
                    <td id="4" class="currency-cell chaos"> </td>
                    <td id="14" class="currency-cell regal"> </td>
                    <td id="5" class="currency-cell gcp"> </td>
                    <td id="2" class="currency-cell fusing"> </td>
                    <td id="3" class="currency-cell alchemy"> </td>
                    <td id="16" class="currency-cell vaal"> </td>
                    <td id="15" class="currency-cell divine"> </td>
                    <td id="13" class="currency-cell regret"> </td>
                    <td id="10" class="currency-cell chisel"> </td>
                    <td id="11" class="currency-cell scouring"> </td>
                    <td id="12" class="currency-cell blessed"> </td>
                    <td id="9" class="currency-cell chance"> </td>
               </tr>

               <tr>
                    <td id="1" class="currency-cell alteration"> </td>
                    <td id="7" class="currency-cell chromatic"> </td>
                    <td id="8" class="currency-cell jewellers"> </td>
                    <td id="22" class="currency-cell transmut"> </td>
                    <td id="23" class="currency-cell augument"> </td>
                    <td id="21" class="currency-cell glassblower"> </td>
                    <td id="20" class="currency-cell blacksmith"> </td>
                    <td id="19" class="currency-cell scrap"> </td>
                    <td id="17" class="currency-cell wisdom"> </td>
                    <td id="18" class="currency-cell portal"> </td>
                    <td id="26" class="currency-cell coin"> </td>
                    <td id="35" class="currency-cell silver"> </td>
                    <td id="40" class="currency-cell offering"> </td>
                    <td id="25" class="currency-cell eternal"> </td>
               </tr>

               <tr>
                    <td class=""></td>
                    <td id="27" class="currency-cell dusk"> </td>
                    <td id="30" class="currency-cell noon"> </td>
                    <td id="28" class="currency-cell midnight"> </td>
                    <td id="29" class="currency-cell dawn"> </td>
                    <td id="31" class="currency-cell grief"> </td>
                    <td id="34" class="currency-cell ignorance"> </td>
                    <td id="32" class="currency-cell rage"> </td>
                    <td id="33" class="currency-cell hope"> </td>
                    <td id="39" class="currency-cell volkuurs"> </td>
                    <td id="38" class="currency-cell inyas"> </td>
                    <td id="36" class="currency-cell ebers"> </td>
                    <td id="37" class="currency-cell yriels"> </td>
                    <td class=""></td>
               </tr>
               
               </table>
              
		</div>

Collectives™ on Stack Overflow

How to prevent adding class to more than two element using jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related