How to minimize jquery script

Asked

Viewed 77 times

-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');
});

This is the html:

<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 have tried several times, but I have not succeeded! You can help me?

(Edit) These functions could 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 the same:

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

  • Why are you wearing option? have a select? can you explain what effect these classes do and what functionality you want to do?

  • Are options for a form.

  • If you explain better you will have better answers. As it is seems to me bad idea because the element option can’t customize on different browsers, so it doesn’t make sense to have classes and I don’t see where you have the attribute value that would be semantically correct. If you explain what you want to do I can give an example with code.

  • the option put only by test, tbm works with div. I get the value of html inside option to send in the form.

  • In steps then: What do you need is to send the chosen option in a certain form? If "yes" what is the idea of the classes active-xx and selected?

  • The form takes the html of the Selected class and the active class is only the design that changes.

  • Why not use the value do select and submit this in the form? Change layout of option does not work on all browsers. How are you submitting the form?

  • Why can’t I change the drawing that is custom made! Select does not fit here.

  • If you want to use elements option you must use inside select, if you want to make your own HTML to simulate a select there everything well. In this case it would be good to put in the question this HTML and css to see what the classes do and how you are submitting the data of this "select".

Show 4 more comments

1 answer

3


like the @Sergio pointed out, his HTML does not seem to be semantically correct, so it is interesting that you open a question asking 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>
<div id="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 a little 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;
  })
});

in addition, if you need a style that will be applied to only one element, maybe you should use the id in the selector 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>
<div id="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 are not helping yourself by using this CSS structure, I advise that instead of switching between two classes, just add/remove a specific class. So instead of .avatar-wom and .avatar-wom-active, ideal would be .avatar-wom and .avatar-wom.active.

In any case, it follows below its simplified code.

$(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>
<div id="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>

<div class="avatar avatar-wom">
  <img src="https://image.flaticon.com/icons/svg/145/145862.svg" />
</div>

And finally an example with CSS changed with the suggestion I gave earlier.:

$(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>
<div id="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>
  <div data-id="wom" class="avatar wom">
    <img src="https://image.flaticon.com/icons/svg/145/145862.svg" />
  </div>
  <div data-id="opt" class="avatar opt">
    <img src="https://image.flaticon.com/icons/svg/344/344296.svg" />
  </div>
</div>

  • Thank you very much! It worked perfectly! You’re a beast. Could you help me with something else? I decided to make another change to the click, edited the question and put at the end the code I would like to simplify.

  • In case I’d like to include you to the main and not separate.

  • @Paulosérgiofilho I edited the answer.

  • Very good, thank you!

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.