我正在使用 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/
最佳答案
为页面上的每张图片分配一个 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% 的宽度和高度。你可以随心所欲地玩。
关于javascript - 使用 document.getElementById() 中的变量简单图像收缩和扩展;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17120259/