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 Commented 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.
    Commented 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? Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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