vendredi 28 juillet 2017

Mapping between button and word for tooltip

While selecting the quantity during order placement I have two buttons, - and +, which decreases/increases the quantity number (not beyond min and max amount).

After reaching min, the - button is grayed out. After reaching max, the + button is grayed out. A tooltip appears which says Quantity cant be less than <min> or Quantity cant be more than <max>.

if ($button.hasClass("minus") && $quantity <= $("#dropdown").data("min")) {
  $button.addClass("grayout");
  $("#tooltip").html("Quantity can't be less than " + $("#centerbox").html()).show();
} else if ($button.hasClass("plus") && $quantity >= $("#dropdown").data("max")) {
  $button.addClass("grayout");
  $("#tooltip").html("Quantity can't be more than " + $("#centerbox").html()).show();
}

I have this if else statement which does the job. Since the contents of if else blocks are almost the same except "less" and "more". Whats the best way to optimize the code?

Things i have tried (but not yet satisfied):

  • Have conditions clubbed by "||" and within the block, check for class again and modify the text accordingly.
  • Have a map outside of the function which maps button element to word
  • Modify the tooltip text to say "Cant go beyoond the range and "

Aucun commentaire:

Enregistrer un commentaire