How to minimize jquery script

Question

How to minimize jquery script

Navigation

#1 by (3 votes)

-1

Is there any way to minimize / simplify this script in jquery?

$("#men").click(function() {
    $("#men").addClass('active-men').addClass('selected');
    $("#wom").removeClass('active-wom').removeClass('selected');
    $("#opt").removeClass('active').removeClass('selected');
});
$("#wom").click(function() {
    $("#men").removeClass('active-men').removeClass('selected');
    $("#wom").addClass('active-wom').addClass('selected');
    $("#opt").removeClass('active').removeClass('selected');
});
$("#opt").click(function() {
    $("#men").removeClass('active-men').removeClass('selected');
    $("#wom").removeClass('active-wom').removeClass('selected');
    $("#opt").addClass('active').addClass('selected');
});

The html is this:

<option id="men" class="op men">Menino</option>
<option id="wom" class="op wom">Menina</option>
<option id="opt" class="op opt">Outro</option>

I've tried it several times, but it did not succeed! Can you help me?

(edit) Could these functions also be included in the script ?:

$("#men").click(function() {
    $(".avatar-men").removeClass('avatar-men').addClass('avatar-men-active');
    $(".avatar-wom-active").removeClass('avatar-wom-active').addClass('avatar-wom');
});
$("#wom").click(function() {
    $(".avatar-wom").removeClass('avatar-wom').addClass('avatar-wom-active');
    $(".avatar-men-active").removeClass('avatar-men-active').addClass('avatar-men');
});
$("#opt").click(function() {
    $(".avatar-men-active").removeClass('avatar-men-active').addClass('avatar-men');
    $(".avatar-wom-active").removeClass('avatar-wom-active').addClass('avatar-wom');
});

HTML of it:

<div class="avt avatar-men"></div>
<div class="avt avatar-wom"></div>

jquery

asked by anonymous 27.05.2017 / 21:46

1 answer

ERROR: Incorrect function How I put on my site a downloadable file with unique id for each person who download

score 3 · Accepted Answer

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>