javascript - onclick對內部元素做了一些事情

Question

<li onclick='doSomething(this)'><img src='pix.png' /><a href='#'>link</a></li>
<li onclick='doSomething(this)'><img src='pix2.png' /><a href='#'>link2</a></li>

單擊列表后，我希望該列表中img的display屬性變為'inline'

function doSomething(obj)
{
    //how to make <img> inside the onclick <li> display=inline
}

如何使用該函數調用來處理這個問題，我希望這樣，因為我有一個以這種方式格式化的現有代碼。

謝謝！

Answer 1

這應該夠了吧

function doSomething(obj)
{
    obj.getElementsByTagName("img")[0].style.display = "inline";
}

Answer 2

您可以在傳遞的obj上使用getElementsByTagName來查找img標記：

function doSomething(obj) {
  var images = obj.getElementsByTagName("img");
  for(var i in images) {
    images[i].style.display = "inline";
  }
}

Answer 3

雖然這里的每個人都會告訴你不再使用內聯onclick處理程序（這是正確的），但我會理所當然地認為你別無選擇。

您可以將id分配給img元素：

<li onclick='doSomething("img1")'><img id='img1' src='pix.png' /><a href='#'>link</a></li>
<li onclick='doSomething("img2")'><img id='img2' src='pix2.png' /><a href='#'>link2</a></li>

接着：

function doSomething(id)
{
    document.getElementById(id).style.display = "inline";
}