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];\">";
}
}
}
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.