jQuery '#' + data("target") pattern

Question

I've seen this a bunch:

<a href="#" id="trigger" data-target="content">Click me</a>
<div id="content">And something will happen here</div>

With JS like this:

$("#trigger").click(function(){
  $("#" + $(this).data("target")).hide();
})

It looks a little weird to me to be doing this string concatenation to create selectors which are then used to get the target element. Is there a better pattern in Javascript (with jQuery available) for setting up handlers on one element which need to know about another target element?

Answer 1

Why you do string concatenation just store the id with #

<a href="#" id="trigger" data-target="#content">Click me</a>

$("#trigger").click(function(){
  $($(this).data("target")).hide();
})

Similarly you can store any selectors as is in data-target say for ex:- .tab1 etc so that you do not have to perform string concatenation again inside the click or any event.

Answer 2

You can simply use

$('#content').modal('toggle');

Any where in you're code to initiate the modal show and hide, You can use even "show"/"hide" functionality directly.

I assume you're using Bootstrap and one of the latest versions of jQuery.

Enjoy !