Can I use a jquery string to target an id?

Question

I'm currently trying to build a menu, and I would like to have a dynamic targeting based on which button I'm pressing.

so for instance, my jquery code looks like this

jQuery(function($) {
  $("button").on("click", function() {
    $('.nav-content').find('> .nav-links').addClass("hidden");
    $('#students').removeClass("hidden");
  });
});

but I was wondering if I could write something like

$('#'.'(this).attr(data-content)').addClass("hidden");

Here is a link to JSFiddle where the full contect of the code can be viewed

Please add all your code from the jsfiddle into this question for clarity. — Ahmed Musallam, Jan 01 '18 at 19:33

score 3 · Answer 1 · answered Jan 01 '18 at 19:25

3

The right syntax to do it is

var currentId = $(this).attr('data-content');
$('#'+currentId).addClass("hidden");

answered Jan 01 '18 at 19:25

Suresh Atta

120,458
37
198
307

Carl Edwards · Answer 2 · 2018-01-02T02:58:44.957

0

String concatenation is done using + operator in JS. You're also missing a dollar sign in your attr invocation:

$('#' + $(this).attr("data-content")).addClass("hidden");

Compatibility permitting you could also use ES6 template literals, enclosing your JS in ${}:

$(`#${$(this).attr(data-content)}`).addClass("hidden");

edited Jan 02 '18 at 02:58

answered Jan 01 '18 at 19:25

Carl Edwards

13,826
11
57
119

score 0 · Answer 3 · answered Jan 01 '18 at 19:35

Here is an updated version of the code in your jsfiddle with a solution: explanation in the comments in the js code.

jQuery(function($) {
   var $nav = $('.nav-content'); // nav parent
      var targets = $nav.find('.nav-links') // links (targets)
      $("button").on("click", function() {
       var $button = $(this);
        var targetId = '#'+$button.data('content') // get the id of the target
        var $target = $nav.find(targetId); // find the target
        targets.addClass("hidden"); // hide all targets
        $target.removeClass("hidden"); // show target with the specific id
      });
    });

.main-container {}

.nav-buttons {
  background-color: blue;
}

.nav-buttons button {}

.nav-content {
  background-color: red;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
}

.content-1 {}

.content-2 {}

.content-3 {}

.shown {
  display: block;
  opacity: 1;
}

.hidden {
  display: none;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="main-container">
  <div class="nav-buttons">
    <button data-content="home">Home</button>
    <button data-content="brands">Brands</button>
    <button data-content="students">Students</button>
  </div>
  <div class="nav-content">
    <div data-content="brands" id="brands" class="nav-links">
      <p>this is a brand</p>
      <p>this is a brand</p>
      <p>this is a brand</p>
      <p>this is a brand</p>
      <p>this is a brand</p>
    </div>
    <div data-content="students" id="students" class="nav-links hidden">
      <p>this is a student</p>
      <p>this is a student</p>
      <p>this is a student</p>
      <p>this is a student</p>
      <p>this is a student</p>
      <p>this is a student</p>
      <p>this is a student</p>
      <p>this is a student</p>
    </div>
    <div class="static-nav-links">
      <p>this link shall always be here</p>
      <p>this link shall always be here</p>
    </div>
  </div>
</div>

Can I use a jquery string to target an id?

3 Answers3