As @Sergio pointed out, your HTML
does not seem to be semantically correct, so it's interesting to It's interesting that you open a question asking for a review of it.
$(document).on("click", ".op", function () {
var that = $(this);
var outros = $(".op[id!='" + this.id + "']");
that.addClass('selected').addClass('active-' + this.id);
outros.removeClass('selected').removeClass(function () {
return "active-" + this.id;
})
});
div {
border: 2px solid transparent;
border-radius: 5px;
padding: 3px;
}
.selected {
background-color: gainsboro;
}
.active-men {
border-color: steelblue;
}
.active-wom {
border-color: crimson;
}
.active-opt {
border-color: teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="men" class="op men">Menino</div>
<div id="wom" class="op wom">Menina</div>
<div id="opt" class="op opt">Outro</div>
Depending on how your HTML is, you can simplify it a bit more.:
$(document).on("click", "[data-tipo]", function () {
var that = $(this);
that.addClass('selected').addClass('active-' + this.id);
that.siblings().removeClass('selected').removeClass(function () {
return "active-" + this.id;
})
});
What's more, if you need a style that will be applied to just one element, you might want to use id
in the selector's composition.
$(document).on("click", ".op", function () {
var that = $(this);
that.addClass('selected');
that.siblings().removeClass('selected');
});
.op {
border: 2px solid transparent;
border-radius: 5px;
padding: 3px;
}
.selected {
background-color: gainsboro;
}
#men.selected {
border-color: steelblue;
}
#wom.selected {
border-color: crimson;
}
#opt.selected {
border-color: teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="men" class="op men">Menino</div>
<div id="wom" class="op wom">Menina</div>
<div id="opt" class="op opt">Outro</div>
EDIT
Look, you're not helping yourself by using this CSS framework, so I advise that instead of switching between two classes, just add / remove a specific class. Then, instead of .avatar-wom
and .avatar-wom-active
, the ideal would be .avatar-wom
and .avatar-wom.active
.
In any case, here is a simplified code below.
$(document).on("click", ".op", function () {
var that = $(this);
var outros = $(".op[id!='" + this.id + "']");
that.addClass('selected').addClass('active-' + this.id);
outros.removeClass('selected').removeClass(function () {
return "active-" + this.id;
});
$(".avatar-men, .avatar-men-active")
.toggleClass("avatar-men", this.id != "men")
.toggleClass("avatar-men-active", this.id == "men");
$(".avatar-wom, .avatar-wom-active")
.toggleClass("avatar-wom", this.id != "wom")
.toggleClass("avatar-wom-active", this.id == "wom");
});
.op {
border: 2px solid transparent;
border-radius: 5px;
padding: 3px;
}
.selected {
background-color: gainsboro;
}
#men.selected {
border-color: rgb(63,81,181);
}
#wom.selected {
border-color: rgb(244,67,54);
}
#opt.selected {
border-color: rgb(0,150,136);
}
.avatar {
position: relative;
float: left;
width: 128px;
height: 128px;
border-radius: 50%;
border: 2px solid black;
background-color: gainsboro;
margin-right: 5px;
overflow: hidden;
}
.avatar-men img {
filter: grayscale(100%);
}
.avatar-wom img {
filter: grayscale(100%);
}
.avatar-men-active {
background-color: rgba(63,81,181, 0.5);
border-color: rgb(63,81,181);
}
.avatar-wom-active {
background-color: rgba(244,67,54, 0.5);
border-color: rgb(244,67,54);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="men" class="op men">Menino</div>
<div id="wom" class="op wom">Menina</div>
<div id="opt" class="op opt">Outro</div>
<div class="avatar avatar-men">
<img src="https://image.flaticon.com/icons/svg/145/145859.svg"/></div><divclass="avatar avatar-wom">
<img src="https://image.flaticon.com/icons/svg/145/145862.svg"/></div>
AndfinallyanexamplewithCSSchangedwiththesuggestionIgavebefore:
$(document).on("click", ".op, .avatar", function () {
var option = $("." + this.dataset.id);
option.addClass('active');
option.siblings().removeClass('active');
});
.op {
border: 2px solid transparent;
border-radius: 5px;
padding: 3px;
transition: all 0.5s linear;
cursor: pointer;
}
.op.men.active {
background-color: rgba(63,81,181,0.2);
border-color: rgb(63,81,181);
}
.op.wom.active {
background-color: rgba(244,67,54,0.2);
border-color: rgb(244,67,54);
}
.op.opt.active {
background-color: rgba(0,150,136,0.2);
border-color: rgb(0,150,136);
}
.avatar {
position: relative;
float: left;
width: 128px;
height: 128px;
border-radius: 50%;
border: 2px solid black;
background-color: gainsboro;
margin-right: 5px;
overflow: hidden;
transition: all 0.5s linear;
cursor: pointer;
}
.avatar img {
filter: grayscale(100%);
transition: all 0.5s linear;
}
.avatar.active img {
filter: grayscale(0%);
}
.avatar.men.active {
background-color: rgba(63,81,181, 0.2);
border-color: rgb(63,81,181);
}
.avatar.wom.active {
background-color: rgba(244,67,54, 0.2);
border-color: rgb(244,67,54);
}
.avatar.opt.active {
background-color: rgba(0,150,136, 0.2);
border-color: rgb(0,150,136);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="options">
<div data-id="men" class="op men">Menino</div>
<div data-id="wom" class="op wom">Menina</div>
<div data-id="opt" class="op opt">Outro</div>
</div>
<div id="avatars">
<div data-id="men" class="avatar men">
<img src="https://image.flaticon.com/icons/svg/145/145859.svg"/></div><divdata-id="wom" class="avatar wom">
<img src="https://image.flaticon.com/icons/svg/145/145862.svg"/></div><divdata-id="opt" class="avatar opt">
<img src="https://image.flaticon.com/icons/svg/344/344296.svg" />
</div>
</div>