javascript - 使用 document.getElementById() 中的变量简单图像收缩和扩展；

Question

我正在使用 php while 循环来创建图像和文本表。在右上角的每一行中都有一个加号和减号。只有加号和减号有 onclick 事件。例如

每次创建新行时，图像和符号的 id 都会递增 1。

第 1 行 有 id="img1" 加号有 id="1" 减号有 id="1 “。

第 2 行 有 id="img2" 加号有 id="2" 减号有 id="2 " 等等。

这是我的脚本:

function shrink(){
    var id = this.id;
    myimg = document.getElementById('img1');
    myimg.style.width = "200px";
}
function expand(){
    var id = this.id;
    myimg = document.getElementById('img' + id);
    myimg.style.width = "300px";
}

缩小有效，但我无法控制缩小哪个图像与其对应加号或减号。

主要问题是如何让 myimg = document.getElementById('img' + id); 与相应的变量 id 一起工作？

示例表

<table>

<tr>
<td style="vertical-align:top;">

    <a href="http://www.theverge.com/2013/6/13/4426360/massive-battery-life-killer-graphics-can-intels-haswell-deliver-on" target="_blank"><img src="http://cdn0.sbnation.com/entry_photo_images/8439797/DSC_4162_large_large.jpg" 
    width="300px" 
    style="padding:0px 5px 0px 5px;" id="story1"></a></td>
    <td style="vertical-align:top; margin-left:">
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQEs9xG9jEdXgirA-4GTEHLQ2VRdWjTjj0TChR49NBXdTbnq0H0" name="up" style="position:relative; right:0px; margin-top:20px; float:right;" width="20px" class="1" onclick="shrink()">
    <h4><a href="http://www.theverge.com/2013/6/13/4426360/massive-battery-life-killer-graphics-can-intels-haswell-deliver-on" target="_blank" style="text-decoration:none; color:orange;">Massive battery life, killer graphics: can Intel's Haswell deliver on the hype?</a></h4><date>The Verge - 
    12 hrs ago</date><p class="intro">For years now, it seems everyone has been waiting for Haswell, the latest processor from Intel that promises major improvements to graphics performance and battery life. The new silicon just...<br>
    New York City,United States </p></td>
    </tr></table>

JS Fiddle: http://jsfiddle.net/ZMkmc/

Answer 1

为页面上的每张图片分配一个 id 有点过分。相反，使用相对 dom 导航。假设您的表格是这样设置的(不应该是因为这里的 html 设计很糟糕 :-p):

<tr>
    <td><img src="somefile.png"/></td>
    <td>
        <span onclick="grow(this)">+</span>
        <span onclick="shrink(this)">-</span>
    </td>
</tr>
<tr>
    <td><img src="somefile.png"/></td>
    <td>
        <span onclick="grow(this)">+</span>
        <span onclick="shrink(this)">-</span>
    </td>
</tr>

那么您的 javascript 将如下所示:

function fixDimensions(img) {
    if (img.style.width == '') {
      img.style.width = img.width + 'px';
    }
    if (img.style.height == '') {
      img.style.height = img.height + 'px';
    }
}

function grow(obj) {
    var img = obj.parentNode.parentNode.cells[obj.parentNode.cellIndex - 1].getElementsByTagName('img')[0];
    fixDimensions(img);
    img.style.width = parseInt(img.style.width) / 4 * 5 + 'px'; // - 25%
    img.style.height = parseInt(img.style.height) / 4 * 5 + 'px'; // - 25%
}

function shrink(obj) {
    var img = obj.parentNode.parentNode.cells[obj.parentNode.cellIndex - 1].getElementsByTagName('img')[0];
    fixDimensions(img);
    img.style.width = parseInt(img.style.width) / 4 * 3 + 'px'; // + 25%
    img.style.height = parseInt(img.style.height) / 4 * 3 + 'px'; // + 25%
}

obj.parentNode.parentNode 将选择器从 obj(带有 + 或 - 的跨度)导航到它的父节点(td)及其父节点(tr)。

我们获取 tr 的单元格集合，并使用跨度父 td 的 cellIndex 的索引 -1 选择位于跨度父 td 之前的单元格(该 td 之前的 td)。

我的示例添加和删除了 25% 的宽度和高度。你可以随心所欲地玩。