我可以使用jquery字符串来定位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

Answer 1

The right syntax to do it is

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

Answer 2

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");

Answer 3

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>