变量Js在PHP代码中不起作用

时间:2016-02-01 20:03:39

标签: javascript php html

可以帮助我使用此代码。我需要获取图像的位置并保存在变量PHP中,然后在div html中写入顶部和左侧位置。 我尝试了所有方法,但我失败了 感谢

<?php

echo "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'>\n";
echo "</script>\n";
echo "<script type=\"text/javascript\">\n";  

echo "window.onload = function() {\n";  

echo "var position = $('#image').position();\n";    

echo "};\n";

echo "</script>\n"; 

$top =  "<script> document.write(position.top) </script>";
$left = "<script> document.write(position.left) </script>";


echo "<div style='position: absolute; top: ".$top."px; left: ".$left."px; opacity: 1;'>\n";

echo "</div>";  

&GT;

3 个答案:

答案 0 :(得分:1)

如果您的目标是将div移动到与#image相同的位置,则可以完全不使用PHP来完成。

这样的事情会起作用:

$(document).ready(function() {
    var position = $('#image').position();
    $('div').css('top',position.top + 'px');
    $('div').css('left',position.left + 'px');
})

您可以在此处看到它:https://jsfiddle.net/4bk852kv/

希望有所帮助!

答案 1 :(得分:1)

在服务器将页面推向客户端之前,

服务器端脚本正在服务器上进行翻译。因此,此步骤中的JavaScript变量不可用。

作为建议,您可以修改代码以使用纯Javascript设置内部html:

public static ArrayList<int[]> yourProblem (int[] array) {
    ArrayList<int[]> result = new ArrayList<>();
    if (array.length == 0) {
        return result;
    } else if (array.length == 1) {
        int[] validPar = {array[0]};    // If odd elements
        result.add(validPar);
        return result;
    }
    for (int i = 1; i < array.length; i++) {
        try {
            if (valid(array[0], array[i])) {
                ArrayList<int[]> next = yourProblem(remove(array, 0, i));
                int[] validPar = {array[0], array[i]};
                result.add(validPar);
                result.addAll(next);
                return result;
            }
        } catch (Exception e) { }
    }
    throw new Exception();
}

答案 2 :(得分:0)

如果您需要描述的DIV元素您不应该使用PHP。此外,您需要与IMG元素相同的DIV宽度和高度。这里是代码:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type="text/javascript">
    $(window).on('load', function() {
        var position = $('#image').position();
        $('#info').css({
            'top': position.top,
            'left': position.left,
            'width': $('#image').width(),
            'height': $('#image').height()
        });
    });
</script>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/800px-Stack_Overflow_logo.svg.png" />
<div id="info" style='position: absolute; opacity: 1;'></div>

不要以为你可以在PHP(服务器)端拥有图像位置。