To add variable to a Jquery selector

Question

Hello, I made a method in Javascript that when clicking a button is added a text with toggle effect. Only I’m using a function that takes 2 values as arguments to do this, and I can’t use these arguments in jquery selectors.

function adicionaToggle(btnId, pId) {
  $('#btnId').click(function() {
    $('#pId').toggle();
  });
  console.log(btnId, pId);
}


$(document).ready(function() {
  $('p').hide();
  $('button').click(function() {
    var btnId = $(this).attr('id');
    var pId = $('button').siblings('p').attr('id');
    adicionaToggle(btnId, pId);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1">
  <img src="espaco.jpg" width="300" height="200">
  <p id="info1">Blabla</p>
  <button id="btn">Mais informações</button>
</div>

Answer 1

Good evening, don’t forget that jquery $() is a selector, you are capturing the element ID:

var btnId = $(this).attr('id'); var pId = $('button').siblings('p').attr('id');

btn and info1 or is it you’re forgetting to put # on the selector!

you can put it like that if you want:

adicionaToggle('#'+btnId,'#'+pId);

other you are not using the variables you are passing to function!

        function adicionaToggle(btnId,pId){     
            $(btnId).click(function(){
                $(pId).toggle();
            });
            $(pId).toggle(); // COLOQUE ISSO PARA O TOGGLE OCORRER NO PRIMEIRO CLICK
            console.log(btnId,pId);
        }

I do not understand why to make a function to add toggle, see if your idea is correct. For more toggle effects of a look -> https://www.w3schools.com/jquery/eff_toggle.asp

$(selector).toggle(speed,easing,callback);

Answer 2

Dude I think you got a little lost in the attributes of the elements at the time of making the code, and made confusion. You at the click of the button call a function that also has the same click event of the same button which is unnecessary, moreover the function adicionaToggle() is totally unnecessary, you can do the toggle() click the same button:

$(document).ready(function() {
  $('#info1').hide();
  $('#btn').click(function() {
    $('#info1').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1">
  <img src="espaco.jpg" width="300" height="200">
  <p id="info1">Blabla</p>
  <button id="btn">Mais informações</button>
</div>

But if you still want to maintain this function adicionaToggle() you can leave her like this:

function adicionaToggle(btnId, pId) {
  $('#info1').toggle();
  console.log(btnId, pId);
}


$(document).ready(function() {
  $('#info1').hide();
  $('#btn').click(function() {
    var btnId = $(this).attr('id');
    var pId = $('button').siblings('p').attr('id');
    adicionaToggle(btnId, pId);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1">
  <img src="espaco.jpg" width="300" height="200">
  <p id="info1">Blabla</p>
  <button id="btn">Mais informações</button>
</div>