2

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

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

Row 1有id="img1"加号有id="1"减号有id="1"。

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

Shrink 可以工作，但我无法控制使用相应的加号或减号来缩小哪个图像。

主要问题是如何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/
4

1 回答 1

0

为页面上的每个图像分配一个 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 的单元格集合，并使用 spans 父级 td 的 cellIndex 的索引 -1 选择 spans 父级 td 之前的单元格（该 td 之前的 td）。

我的示例添加和删除了 25% 的宽度和高度。你可以根据自己的喜好玩。

于 2013-06-15T05:20:26.857 回答