Jquery 1 id具有更多图像并更改所有图像宽度/高度/位置

Question

I have about 10-15 images with only one id: "buildings": When the page loads up, I'd like to change all the images width/height/position left and top, but if I echo the images with a foreach, and use the script, the script change size only for the first image. Why, and how can I fix it?

This is the script:

$( document ).ready(function() {
        var width = window.outerWidth;
        var height = window.outerHeight;
        var alapw = 1680, alaph = 1000;

        var aranyW = width/alapw;
        var aranyH = height/alaph;


        $( "#map").css( "width", parseInt($( "#map").css( "width")) * aranyW);
        $( "#map").css( "height", parseInt($( "#map").css( "height")) * aranyH);


        $( "#buildings").css( "width", parseInt($( "#buildings").css( "width")) * aranyW);
        $( "#buildings").css( "height", parseInt($( "#buildings").css( "height")) * aranyH);
        $( "#buildings").css( "left", parseInt($( "#buildings").css( "left")) * aranyW);
        $( "#buildings").css( "top", parseInt($( "#buildings").css( "top")) * aranyH);
    });

    function epuletModosul( a, b ) {
        location.href="../views/epuletmodosul.php?id=" + b;
    }

And this is the php (images):

foreach($epuletek[0] as $key=>$value)
{
    foreach( $osszEpulet as $kulcs=>$ertek )
    {
        $plit = explode("_",$key);
        if( $plit[0] == $ertek[0] )
        {
            if( $value == 0 )
            {
                echo "<img id=\"buildings\" name=\"$ertek[0]\" src=\"../resources/images/buildings/sand.png\" width=\"77\" height=\"77\" onclick=\"epuletModosul(0,-1)\"  style=\" position: absolute; left: $ertek[1]; top: $ertek[2];\">";

            }
            else if( $value == 1 )
            {
                echo "<img id=\"buildings\" name=\"$ertek[0]\" src=\"../resources/images/buildings/$ertek[0].png\" width=\"77\" height=\"77\" onclick=\"epuletModosul(1,$kulcs)\"  style=\" position: absolute; left: $ertek[1]; top: $ertek[2];\">";
            }
        }
    }
}

Answer 1

As Satpal stated id must be unique, however you can use the class attribute.

PHP:

foreach($epuletek[0] as $key=>$value)
{
    foreach( $osszEpulet as $kulcs=>$ertek )
    {
        $plit = explode("_",$key);
        if( $plit[0] == $ertek[0] )
        {
            if( $value == 0 )
            {
                echo "<img class=\"buildings\" name=\"$ertek[0]\" src=\"../resources/images/buildings/sand.png\" width=\"77\" height=\"77\" onclick=\"epuletModosul(0,-1)\"  style=\" position: absolute; left: $ertek[1]; top: $ertek[2];\">";

            }
            else if( $value == 1 )
            {
                echo "<img class=\"buildings\" name=\"$ertek[0]\" src=\"../resources/images/buildings/$ertek[0].png\" width=\"77\" height=\"77\" onclick=\"epuletModosul(1,$kulcs)\"  style=\" position: absolute; left: $ertek[1]; top: $ertek[2];\">";
            }
        }
    }
}

JS:

$( document ).ready(function() {
    var width = window.outerWidth;
    var height = window.outerHeight;
    var alapw = 1680, alaph = 1000;

    var aranyW = width/alapw;
    var aranyH = height/alaph;


    $( "#map").css( "width", parseInt($( "#map").css( "width")) * aranyW);
    $( "#map").css( "height", parseInt($( "#map").css( "height")) * aranyH);

    $( ".buildings").each(function(){
        var cssValue={
                        width: parseInt($(this).css( "width")) * aranyW,
                        heigh: parseInt($(this).css( "height")) * aranyH,
                        left: parseInt($(this).css( "left")) * aranyW,
                        top: parseInt($(this).css( "top")) * aranyH
                     };
        $(this).css(cssValue);
    });
});

function epuletModosul( a, b ) {
    location.href="../views/epuletmodosul.php?id=" + b;
}