All geek questions in one place

Javascript - filling a div with contents from a hidden div using buttons

I need help. As you will see in my fiddle, I am trying to use buttons to fill one container div with contents from several hidden blocks, depending on which button is pressed. My problem is that I don’t know how to access the actual content in hidden div elements to fill the container div element. Right now I'm using id attributes for hidden divs to demonstrate what div content I would like to display in the container.

I saw several other posts with link attributes <a> linking to hidden content, but not one of them has used a button element with a click function to change the contents of a div.

  jQuery(function ($) { $('#button1').click(function () { $('#info').empty(); $('#info').prepend('#option1'); }); $('#button2').click(function () { $('#info').empty(); $('#info').prepend('#option2'); }); $('#button3').click(function () { $('#info').empty(); $('#info').prepend('#option3'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="button-panel"> <ul id="button-column" style="list-style: none;"> <li class="buttons"><button id="button1">Button 1</button></li> <li class="buttons"><button id="button2">Button 2</button></li> <li class="buttons"><button id="button3">Button 3</button></li> </ul> </div> <div id="info-div"> <div id="info"></div> </div> <div id="hiddenDivs" style="display:none;"> <div class="info" id="option1">Box</div> <div class="info" id="option2">Google Drive</div> <div class="info" id="option3">Box</div> </div>

Here is my violin

+6
source share
7 answers

Here is the version using jquery data attributes. This reduces redundancy and complexity and can be easily configured.

 <body> <div class="button-panel"> <ul id="button-column" style="list-style: none;"> <li class="buttons"><button id="button1" data-link="option1">Button 1</button></li> <li class="buttons"><button id="button2" data-link="option2">Button 2</button></li> <li class="buttons"><button id="button3" data-link="option3">Button 3</button></li> </ul> </div> <div id="info-div"> <div id="info"> </div> </div> <div id="hiddenDivs" style="display:none;"> <div class="info" id="option1">Box</div> <div class="info" id="option2">Google Drive</div> <div class="info" id="option3">Box</div> </div> </body> <script> $('.buttons button').click(function (){ $('#info').empty(); $('#info').html($("#" + $(this).data('link')).html()); }); </script>

Example: https://jsfiddle.net/yvsu6qfw/3/

+4
source

Looks like you might have been looking for the button itself to populate the data embedded in the button with a data attribute or something else? If so, you can do something like this:

HTML

 <div class="button-panel"> <ul id="button-column" style="list-style: none;"> <li class="buttons"><button data-info="Box">Button 1</button></li> <li class="buttons"><button data-info="Google Drive">Button 2</button></li> <li class="buttons"><button data-info="Box">Button 3</button></li> </ul> </div> <div id="info-div"> <div id="info"></div> </div>

JQuery

 $(document).ready(function (){ $('#button-column button').click(function (){ $('#info').html($(this).attr('data-info')); }); });
+1
source

If you want the first button to load content from the first hidden div, etc., without relying on the use of id attributes, you can use . index () . When you pass this as an argument, it will return the value of the target index of the click event in the $("#button-column .buttons :button") collection $("#button-column .buttons :button") . Subsequently, you can pass the index value to the method . Get () to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info") .

 $().ready(function(){ $("#button-column .buttons :button").on("click", function(){ $('#info').empty(); var clickedIndex = $("#button-column .buttons :button").index(this); var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex); $('#info').prepend( $(hiddenInfo).text() ); }); });
+1
source

you can use the html function, without a parameter it gets the contents of an element with a parameter replaces the contents with a string parameter

 $(document).ready(function (){ $('#button1').click(function (){ $('#info').html( $('#option1').html() ); }); $('#button2').click(function (){ $('#info').html( $('#option2').html() ); }); $('#button3').click(function (){ $('#info').html( $('#option3').html() ); }); });
0
source

In your code example, you, for example:

 $('#info').prepend('#option1');

What you are instructing here is adding the text string '# option1' to the ID information item.

What you intend to do is add the contents of option1 identifier to the identity element. Instead, you can do something like this:

 $('#info').prepend($('#option1').html());

Another approach could be (but I don’t know if this is suitable for you), so as not to clone the content (since it costs you to redraw), but instead switches specific elements. For instance:

 $('#option1,#option2').hide(); $('#option3').hide();

And one more: use the data attributes on your buttons:

 <a href="#" data-text="Box" class="button">Button 1</a> <a href="#" data-text="Another text" class="button">Button 2</a> <div id="info"> </div>

And JS:

 $('.button').on('click', function(event) { event.preventDefault(); $('#info').html($(event.currentTarget).attr('data-text')); });
0
source

Do not repeat yourself! To get the number from the identifier, replace with "" everything that is not a number using RegExp \D

Using the number from the identifier

Then, to get the actual content, you can use the methods $("#option"+ num).html() or $("#option"+ num).text() :

jsFiddle demo

 jQuery(function ($) { $('.buttons button').click(function () { var num = this.id.replace(/\D/g,""); $("#info").html( $("#option"+ num).html() ); }); });

Target element using data-* attribute

Alternatively, you can save the desired target selector identifier inside the data-* attribute:

 <button data-content="#option1" id="button1">Button 1</button>

and not just:

jsFiddle demo

 jQuery(function ($) { $("[data-content]").click(function () { $("#info").html( $(this.dataset.content).html() ); }); });

http://api.jquery.com/html/
http://api.jquery.com/text/

0
source

If the expectation is to get the same indexed hidden content div, then the following code should work.

 $(document).ready(function (){ $('.buttons button').click(function (){ $('#info').empty(); var index = $('.buttons button').index($(this)); $('#info').html($('.info:eq('+index+')').html()); }); });
0
source

Source: https://habr.com/ru/post/1011998/

More articles:


All Articles