Question

我正在使用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";
}

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

主要问题是如何让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％的宽度和高度。你可以根据自己的喜好玩这个。

使用document.getElementById（）中的变量缩小和扩展简单图像;

1 个答案: