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

【问题标题】：Jquery 1 id with more image and change all image width/height/positionJquery 1 id 具有更多图像并更改所有图像宽度/高度/位置
【发布时间】：2015-04-17 10:28:39
【问题描述】：

我有大约 10-15 张只有一个 id 的图像：“buildings”：当页面加载时，我想更改所有图像的宽度/高度/左侧和顶部位置，但如果我用一个foreach，并使用脚本，脚本只改变第一张图片的大小。为什么，我该如何解决？

这是脚本：

$( 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;
    }

这是 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 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];\">";
            }
        }
    }
}

【问题讨论】：

Element.id 在 HTML 中必须是唯一的。您可以改用通用类。
为每个 element 分配一个 class 并在脚本中使用 class 而不是 id 并保持类的名称相同
如果您想一次性引用它们，最好保留单个类名！
id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。因此，您需要更改图像的 ID：buildings_1、buildings_2、buildings_3...
在您的 php 中替换：id=\"buildings\" 与 class=\"buildings\" 并在您的 JS：$( "#buildings") 中与 $( ".buildings");也许您还应该考虑函数 [.each()] (api.jquery.com/jquery.each)

标签： javascript php jquery html css

【解决方案1】：

正如 Satpal 所说，id 必须是唯一的，但是您可以使用 class 属性。

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;
}

【讨论】：