0

desarrollo una web en base wordpress y necesito pasar una variable PHP en mi main.js, es decir, en mi archivo footer.php la fracción de código es 100% funcional, pero no solo uso ID's o clases, si no que tambien uso arrays de ACF con grupos de texto eh imagenes y me gustaria que esto estuviera funcional en mi main.js. Os expongo el ejemplo.

<?php $gruppe = get_field('gruppe', 'options'); ?>

<section class="headInhalt">
    <div class="bkImage">
        <img id="headBK" src="<?php echo $headBild['sizes']['large']; ?>" alt="<?php echo $headBild['alt']; ?>"/>
    </div>

    <?php if ($gruppe): ?>
        <div class="inhalt">
            <?php foreach ($gruppe as $group):
                $inhalt = $group['content'];
                ?>
                <div id="<?php echo $inhalt['id']; ?>" class="objekt">
                    <img src="<?php echo $inhalt['bild']['url'] ?>"
                         alt="<?php echo $inhalt['bild']['alt'] ?>">
                </div>
            <?php $box = $inhalt['box']; ?>
                <div class="contentTheobjekt">
                    <div class="columns">
                        <div class="column is-3 thecolumn">
                            <div class="close">
                                <p>X</p>
                            </div>
                            <div class="columns">
                              <div class="column is-full">
                                  <div class="thecolumncontent">
                                      <div class="title">
                                          <?php echo $box['titel'] ?>
                                      </div>
                                      <div class="content">
                                          <?php echo $box['content']; ?>
                                      </div>
                                  </div>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            $bild = $inhalt['background-image']['sizes']['large'];
            ?>
                <script>
                    $(document).ready(function () {
                        $('.thecolumn').toggle();
                        var clicked = false;
                        $('.objekt').click(function () {
                            event.preventDefault();
                            if (!clicked) {
                                $('#headBK').attr('src', '<?php echo $bild; ?>').fadeIn("slow");
                                $('.thecolumn').toggle("slide");
                                clicked = true;
                            } else {
                                $('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
                                $('.thecolumn').toggle("slide");
                                clicked = false;
                            }
                        });

                        /**Block close**/
                        $('.close p').click(function () {
                            $('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
                            $('.thecolumn').toggle("slide");
                        })

                    });
                </script>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>


</section>

Esto es exactamente como esta montado, y lo que quiero es que esto:

<script>
    $(document).ready(function () {
                        $('.thecolumn').toggle();
                        var clicked = false;
                        $('.objekt').click(function () {
                            event.preventDefault();
                            if (!clicked) {
                                $('#headBK').attr('src', '<?php echo $bild; ?>').fadeIn("slow");
                                $('.thecolumn').toggle("slide");
                                clicked = true;
                            } else {
                                $('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
                                $('.thecolumn').toggle("slide");
                                clicked = false;
                            }
                        });

                        /**Block close**/
                        $('.close p').click(function () {
                            $('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
                            $('.thecolumn').toggle("slide");
                        })

                    });
                </script>

Pase a funcionar en main.js, no es por nada en concreto, es por ser ordenado y tener todas las reglas en sus respectivos archivos. Gracias y un saludo

3
  • quieres sacar este script fuera del archivo .php? podrías formular una pregunta concreta? gracias el 12 feb. 2019 a las 7:43
  • Esta formulada, puse arriba, al final del código, que lo que quiero es que esto(el codigo javascript), pase a funcionar en main.js. Y arriba del todo puse ( me gustaria que esto estuviera funcional en mi main.js.)
    – Dario B.
    el 12 feb. 2019 a las 7:55
  • Ha intentdao meter el evento dentro de una funcion y despues simplemente llamarlo en php desde el archivo main.js? el 12 feb. 2019 a las 8:30

1 respuesta 1

1

Puedes declarar unas variables javascript con los valores que necesitas en el php y después usarlas en el onclick:

<?php $gruppe = get_field('gruppe', 'options'); ?>

<section class="headInhalt">
    <div class="bkImage">
        <img id="headBK" src="<?php echo $headBild['sizes']['large']; ?>" alt="<?php echo $headBild['alt']; ?>"/>
    </div>

    <?php if ($gruppe): ?>
        <div class="inhalt">
            <?php foreach ($gruppe as $group):
                $inhalt = $group['content'];
                ?>
                <div id="<?php echo $inhalt['id']; ?>" class="objekt">
                    <img src="<?php echo $inhalt['bild']['url'] ?>"
                         alt="<?php echo $inhalt['bild']['alt'] ?>">
                </div>
            <?php $box = $inhalt['box']; ?>
                <div class="contentTheobjekt">
                    <div class="columns">
                        <div class="column is-3 thecolumn">
                            <div class="close">
                                <p>X</p>
                            </div>
                            <div class="columns">
                              <div class="column is-full">
                                  <div class="thecolumncontent">
                                      <div class="title">
                                          <?php echo $box['titel'] ?>
                                      </div>
                                      <div class="content">
                                          <?php echo $box['content']; ?>
                                      </div>
                                  </div>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            $bild = $inhalt['background-image']['sizes']['large'];
            ?>
                <script>
                    var bild = '<?php echo $bild; ?>';
                    var large = '<?php echo $headBild['sizes']['large']; ?>';
                </script>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>


</section>

y ya en el main.js declaras el onclick usando esas variables:

$(document).ready(function () {
                    $('.thecolumn').toggle();
                    var clicked = false;
                    $('.objekt').click(function () {
                        event.preventDefault();
                        if (!clicked) {
                            $('#headBK').attr('src', bild).fadeIn("slow");
                            $('.thecolumn').toggle("slide");
                            clicked = true;
                        } else {
                            $('#headBK').attr('src', large);
                            $('.thecolumn').toggle("slide");
                            clicked = false;
                        }
                    });

                    /**Block close**/
                    $('.close p').click(function () {
                        $('#headBK').attr('src', large);
                        $('.thecolumn').toggle("slide");
                    })

                });

Otra opción es cambiar el main.js a php (main.js.php por ejemplo) pero no es una opción que me guste mucho...

Un saludo.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.