Question 200337 in Html Question posted in
Some basic documentation can be found here.

Open Multiples Dialogs in HTML JS

How can I change this here so that I click on a div with a certain ID or Class and open a dialog with a certain ID?

$('body').on('click', '#id01', function() {
  var dlg = new DialogFx($('#itemDetails').get(0));
  dlg.toggle();
});

In this case, I can only click in the div "#id01" to open the dialog with "#itemDetails";

But I want to create "itemDetails2" "itemDetails3" and open by clicking in differents divs with differents IDs in the HTML.

Tags:

2

Answers


  1. 0

    Replace the ID (in the selector spot, after event’s name) by a class name or a customized attribute (aka data-attribute).

    $('body').on('click', '.someClass', function() {
    const dlg = new DialogFx($('#itemDetails').get(0));
    dlg.toggle();
});

    Previously you must add the same class name to all related elements.

    <span id="id01" class="someClass"></span>
<span id="id02" class="someClass"></span>
<span id="id03" class="someClass"></span>
...
    Login or Signup to reply.
  2. 0

    Using a data attribute you can target elements and use the value to determine what element to select.

    $('body').on('click', '[data-triggers]', function() {
  const selector = $(this).data("triggers");
  const itemDetails = $(selector);
  console.log(itemDetails.text());
  // var dlg = new DialogFx($('#itemDetails').get(0));
  //dlg.toggle();
});
    .details { display: none; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="details1" class="details">details 1</div>
<div id="details2" class="details">details 2</div>
<div id="details3" class="details">details 3</div>
<div id="details4" class="details">details 4</div>

<button data-triggers="#details1">1</button>
<button data-triggers="#details2">2</button>
<button data-triggers="#details3">3</button>
<button data-triggers="#details4">4</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search