抓住img标签并更改图像

时间:2013-11-08 16:24:03

标签: javascript jquery html css

我的javascript代码存在一个问题。我知道如何使用jQuery,但我必须使用js。当有人点击第一个div以在第一个div中捕获图像“show.png”并将其更改为另一个

时,我需要

我有这样的HTML代码(这个用不同的ID重复几次)

<div class="clickdown" onclick="return toggleMe('p_202')">
    <table>
        <tr valign="top">
            <td width="20px">
                <img src="images/show.png" align="top" alt="" />
            </td>
            <td>
                <b>textttext</b>&nbsp;&nbsp;<img src="images/btn_New.png" alt="" />
            </td>
        </tr>
    </table>
</div>
<div id="p_202" class="clickdown_content" style="display: none;">
    <p>
    texttexttexttexttexttexttext
    </p>
</div>

并存在用于展开和缩小第二个div的Javascript代码。

function toggleMe(a) {
   var e = document.getElementById(a);
   if (!e) return true;
   if (e.style.display == "none") {
       e.style.display = "block"
   } else {
       e.style.display = "none"
   }
   return true;
}

仅供参考我不要告诉我“这段代码是......” - 我知道但是我要求添加,而不是更改任何内容。

所以我无法添加ID并将其与getElementByID()

一起使用

我尝试这样的东西,但是不起作用(这里我隐藏图像只是为了看看是否有效)

function toggleMe(a) {
    var ttable = document.getElementsByTagName("table").item(0);
    var ttr = ttable.getElementsByTagName("tr").item(0);
    var ttd = ttr.getElementsByTagName("td").item(0);
    vari = ttd.getElementsByTagName("img").item(0);
    if (i.src == "images/btn_New.png") {
        i.style.display == "none"
    } else {
        i.style.display = "block"
    };
    var e = document.getElementById(a);
    if (!e) return true;
    if (e.style.display == "none") {
        e.style.display = "block"
    } else {
        e.style.display = "none"
    }
    return true;
}

恢复:

我必须保留旧代码html和javascript并添加新的javascript代码

1 个答案:

答案 0 :(得分:0)

有效:

function toggleMe(a) {
  var ttable = document.getElementsByTagName("table").item(0);
  var ttr = ttable.getElementsByTagName("tr").item(0);
  var ttd = ttr.getElementsByTagName("td").item(0);
  var i = ttd.getElementsByTagName("img").item(0);
  if (i.src.indexOf("images/show.png") !== -1) {
    i.style.display = "none";
  } else {
    i.style.display = "block";
  }

  var e = document.getElementById(a);
  if (!e) return true;
  if (e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
  return true;
}

您必须使用indexOf,因为在属性 src 中您拥有整个网址。

Plunker example

您可以通过这种方式轻松更改图片:

i.src = "images/newShow.png";