jquery load multiple attributes in to an iframe or div

$( ".clicky-class-name" ).click(function() { var iframeStyle = '<?php the_field('style_id');?>'; var iframe = "https://yoururl?style="; var loadColorAtr = '&color='; var colorCode = $(this).data('color-code'); var loadStyle = iframe + iframeStyle + loadColorAtr + colorCode; //alert(loadStyle); $('#iframe-id').attr('src', loadStyle); }); //We start off with a primary url we are going to add values to: var iframe //We are also including a php data from a field called 'style_id' for this example we will call it shirt //The class 'clicky-class-name' has a data attribute called 'data-color-code' that needs to be placed after the loadColorAtr which is &color= //The HTML Strucutre would look like: <div class="clicky-class-name" data-color-code="black">Black</div> //<iframe id="iframe-id" src=""> //So the source we get for the iframe after the click would be: https://yoururl?style=shirt&color=black
jQuery on click method to change an iframe's url source concatenated on data from a php field, and color acquired from a class's data attribute.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.