How to use php code in javascript

Question

I have a javascript file grid.js that containsthe following code

Preview.prototype = {
        create : function() {
            // create Preview structure:
            this.$title = $( '<h3></h3>' );
            this.$description = $( '<p></p>' );
            this.$href = $('<div class="showbutton"><form id="myform" method="POST" action="#"><div class="linkbtn02"><a href="#">EVOEGEN</a></div></form></div>' );
            this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
            this.$loading = $( '<div class="og-loading"></div>' );
            this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
            this.$closePreview = $( '<span class="og-close"></span>' );
            this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
            this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
            // append preview element to the item
            this.$item.append( this.getEl() );
            // set the transitions for the preview and the item
            if( support ) {
                this.setTransition();
            }
        },
}

But I would like to use dynamic values for this.$href attribute.

It will be like this

this.$href = $('<div class="showbutton"><?php woocommerce_quantity_input(); ?></div>' );

Can someone tell me how to use that inside php?

Please note, I have a foreach loop. So that line will be different for each loop.

Answer 1

What you can do is pass the variable from outside that .js file, like this:

// index.php

<div class="row">
    <div class="small-12 columns">
        page content
    </div>
</div>
<script>var test = '<?php echo $variable; ?>';</script>

and then reference that variable the same as if you defined it within that .js file (mind the potential scope issue).