I have a modal with different tabs and I need to load the id that I have clicked to consult some records in the directory.
With this code I am showing content in different tabs . But how to load those id in the function?
The ids come from different divs in my HTML .
For example I have div like this:
<div id="l73" >Textos </div>
<div id="l74" >Textos </div>
<div id="l75" >Textos </div>
<div id="l76" >Textos </div>
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<script type="text/javascript">
$(document).ready(function(e) {
$("#l73").click(function() {
$("#home").html('<embed src="./files/l73_4b/l73_ejemplo.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" /> ');
});
});
</script>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<script type="text/javascript">
$(document).ready(function(e) {
$("#l73").click(function() {
$("#profile").html('<embed src="./files/l73_4b/l73_instruccion.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" style="margin-top: -420px;" /> ');
});
});
</script>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<script type="text/javascript">
$(document).ready(function(e) {
$("#l73").click(function() {
$("#contact").html('<embed src="./files/l73_4b/l73_instruccion.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" style="margin-top: -420px;" /> ');
});
});
</script>
</div>
What I am looking for is that when I click on the div with id 73 for example, that id is loaded in the function $("**#l73**").click
and see how to load it here <embed src="./files/**l73_4b**/l73_instruccion.pdf"
so that it can consult me in this route.
It can be solved in a simple way, using the events, you will have to put the same class to all the
<div>
, because that way we avoid adding an eventListener for each oneWe use
.target
to know which element has been clickedHaving already the element, we only use
getAttribute
to be able to obtain theid
So, what's the point of putting an ID on the
<embed>
We use
querySelectorAll
to get all the DOM elements with a Specific CSS selector, which we can iterate withforEach
Since you use jQuery, I leave you an example of how to do it using this library