jQuery multiple click handling

Question

I have the code below working to handle clicking a link from a list, showing a screen, and then hiding it when the .back button is pressed.

Is there a cleaner way to handle the click function for any x number of list items?

$(".container").on("click", ".dog-btn", function() {
  $(".screen1").css("display","flex")
});
$(".container").on("click", "#back", function() {
  $(".screen1").css("display","none")
});
$(".container").on("click", ".cat-btn", function() {
  $(".screen2").css("display","flex")
});
$(".container").on("click", "#back", function() {
  $(".screen2").css("display","none")
});
$(".container").on("click", ".bird-btn", function() {
  $(".screen3").css("display","flex")
});
$(".container").on("click", "#back", function() {
  $(".screen3").css("display","none")
});

From what I see, you just need one handler for #back, which to hide all 3 screens. — choz
– choz, Commented Jul 31, 2018 at 6:38

Zeeshan Tariq · Accepted Answer · 2018-07-31 06:44:04Z

1

You can use html5 data attributes to pass screen classes.

HTML CODE

<div class="container">
<button class="flex" data-screen="screen1"> DOG</button> 
<a href="void(0)" data-screen="screen1" class="back">Back </a>
</div>

JavaScript Code

//Flex Handler
$(".container").on("click", ".flex", function() {
  $("."+$(this).data("screen")).css("display","flex")
});
//Back Button Handler
$(".container").on("click", ".back", function() {
  $("."+$(this).data("screen")).css("display","none")
});

Hope it helps.

answered Jul 31, 2018 at 6:44

Zeeshan Tariq

6345 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

choz Over a year ago

Yep, data-* surely helps in this OP case.

Manoz · Accepted Answer · 2018-07-31 07:13:30Z

0

You can have benefits of data-* attributes of HTML5 as its answered here.

But additionally you can put your custom styles in JSON format in data attributes too. So that you don't need to specify it on every control. That would just go with one click handler as below

$('button').on('click',function(){
  var target=$(this).data('target'),
      css = $(this).data('css');
      $(target).css(css);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-css='{"background":"yellow"}'
data-target="#screen1">
click 1
</button>
<button data-css='{"background":"red"}'
data-target="#screen2">
click 2
</button>

<div id="screen1">
screen1
</div>
<div id="screen2">
screen2
</div>

edited Jul 31, 2018 at 7:13

answered Jul 31, 2018 at 6:52

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Comments

KooiInc · Accepted Answer · 2018-07-31 13:51:06Z

A mockup without jQuery, using event delegation and ES20xx

document.querySelector(".container").addEventListener("click", handleEvents);
document.querySelector("#back").click();

function handleEvents(evt) {
  const origin = evt.target;
  const screenMap = {
    "dog-btn": "screen1",
    "cat-btn": "screen2",
    "bird-btn": "screen3",
  };
  if (origin.id && origin.id === "back") {
    const screens = `.${Object.entries(screenMap).map(([key, value]) => value).join(",.")}`;
    return Array.from(document.querySelectorAll(screens))
      .forEach(screen => screen.style.display = "none");
  }
  
  if (Array.from(origin.classList).filter(v => /\-btn$/i.test(v)).length) {
    return document.querySelector(`.${screenMap[origin.classList]}`)
      .style.display = "flex";
  }
}

<div class="container">
  <div class="screen1">screen 1 DOG</div>
  <div class="screen2">screen 2 CAT</div>
  <div class="screen3">screen 3 BIRD</div>
  <button id="back">#back</button>
  <button class="dog-btn">.dog-btn</button>
  <button class="cat-btn">.cat-btn</button>
  <button class="bird-btn">.bird-btn</button>
</div>

Collectives™ on Stack Overflow

jQuery multiple click handling

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related