getElementById('___')。innerHTML销毁元素的ID?

时间:2012-04-28 01:43:37

标签: javascript innerhtml

我正在尝试这样做,以便当用户点击导航菜单时,标题会更改为该标题,主要内容也会更改。我宁愿尝试避免使用框架。

$('op').click(function(){
    document.getElementById('title').innerHTML=this.innerHTML + ((this.innerHTML.indexOf("'s")==this.innerHTML.length-2) ? " " : "'s ") + this.parentNode.id + " | Le Lepids";
    document.getElementById('content').innerHTML=document.getElementById(this.innerHTML + '_' + this.parentNode.id).innerHTML;
});
// If the code looks ugly and you can't read it, just tell me.

但是,每次都会改变标题,但内容只会改变一次。

例如,它第一次工作正常,之后不再工作。

为什么会这样?它会破坏id'内容'吗?我不是在使用outterHTML。如果剂量,为什么标题会变好?


编辑:好的,所以我想我用几行PH​​P修复了它。 但是我仍然想知道为什么它不会在我的网站上运行,而Mia DiLorenzo所做的工作完全正常......代码与变量名称完全相同。

2 个答案:

答案 0 :(得分:0)

这还不是一个完整的答案(我们需要你的HTML),但我认为这些信息是回答的一步,而且不能在评论中传达。

在伪代码中(为了使其更容易理解),这就是你的代码所做的事情:

对于#content项:

  1. 获取点击op元素的innerHTML。
  2. '_'添加到该innerHTML。
  3. 添加点击op元素的parentNode.id。
  4. 使用该制造的ID,在其上执行document.getElementById()以查找对象。
  5. 获取该对象的innerHTML并将该innerHTML放入#content项。
  6. 对于#title项:

    1. 获取点击op元素的innerHTML。
    2. 如果该HTML以"'s"结尾,则将" "添加到innerHTML,否则添加"'s"
    3. 将parentNode.id添加到该。
    4. " | Le Lepids"添加到其中。
    5. #title项的innerHTML设置为该结果。
    6. 我可以想到为什么#content项可能总是被设置为同一个项目或者为什么它有时只能工作的几个原因,但是我们必须看到你的实际HTML以确定当发生时或者为什么。

答案 1 :(得分:0)

我不确定你想要什么,但无论如何我写了一些东西http://jsfiddle.net/69FDT/1/

我将$('op')更改为$('p')并添加了一些div以匹配更改content的Javascript行。你的意思是什么吗?

<div id="container">
    <div>Click on these words</div>
      <p>change</p>
      <p>modify</p>
      <p>alter</p>
    <br>
      <div id='title'>Title</div>
      <div id='content'>content</div>
<br>
      <div id="change_container">change placeholder div</div>
      <div id="modify_container">modify placeholder div</div>
      <div id="alter_container">alter placeholder div</div>
    </div>​