javascript函数只查看第一个元素

这是我的JavaScript代码，它适用于第一个元素内容，但不显示/隐藏第二个元素

这是呈现的代码：

:JavaScript

function showstuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="block";
   document.getElementById(more#{g.id}).style.display="none";
}
function hidestuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="none";
   document.getElementById(more#{g.id}).style.display="inline";
}

假设{g.id}的值为1。因此，生成的JavaScript代码如下所示：

<script>
            function showstuff(content1){
             document.getElementById(content1).style.display="block";
             document.getElementById(more1).style.display="none";
            }
            function hidestuff(content1){
             document.getElementById(content1).style.display="none";
             document.getElementById(more1).style.display="inline";
            }
</script>

<div id="1">
  <h3>title</h3>
  <p>
    text
  </p>
  <a style="display:inline;" onclick="showstuff('content1')" id="more1">Read More</a>
  <div style="display: none;" id="content1">
    <p> content </p>
    <a onclick="hidestuff('content1')">Show Less</a>
  </div>
</div>

function showstuff(content1){
    document.getElementById(content1).style.display="block";
    document.getElementById(more1).style.display="none";
}
function hidestuff(content1){
    document.getElementById(content1).style.display="none";
    document.getElementById(more1).style.display="inline";
}

因此，当您在函数体内部调用showstuff'something'时，有一个名为content1的变量，其值为'something'。这会传递到代码的第一行，并正确地选择一个元素。但是，您是否在别处定义了more1变量？我对此表示怀疑，因此没有可选择的元素，因此没有可更改的style.display属性

也许你是想做一些更像这样的事情：

<script>
            function showstuff(content1){
             document.getElementById(content1).style.display="block";
             document.getElementById(more1).style.display="none";
            }
            function hidestuff(content1){
             document.getElementById(content1).style.display="none";
             document.getElementById(more1).style.display="inline";
            }
</script>

<div id="1">
  <h3>title</h3>
  <p>
    text
  </p>
  <a style="display:inline;" onclick="showstuff('content1')" id="more1">Read More</a>
  <div style="display: none;" id="content1">
    <p> content </p>
    <a onclick="hidestuff('content1')">Show Less</a>
  </div>
</div>

function showstuff(content1){
    document.getElementById(content1).style.display="block";
    document.getElementById(more1).style.display="none";
}
function hidestuff(content1){
    document.getElementById(content1).style.display="none";
    document.getElementById(more1).style.display="inline";
}

那么你可以这样称呼它：

function showstuff(id) {
    document.getElementById('content' + id).style.display="block";
    document.getElementById('more' + id).style.display="none";
}

---

它将显示/隐藏ID为content1和more1的元素。

这是什么样的模板系统，选择器代表什么，这些ID是什么，您是否多次使用相同的ID等等？我完全看不懂！该死，请提供呈现的HTML标记，不是为Teletoobies编写的不可读代码。我没有使用haml，但这些元素似乎使用class，而不是id？这里没有定义more1。它可以是：document.getElementById'more1'，但肯定不是您所期望的将more1传递给函数hidestuff'content1'，'more1'；函数hidestuffcontent1，更多1我已经用我正在使用的haml代码更新了我的问题using@CarlaDessi嗯，你的HTML生成代码让我更加确信我所发布的内容是正确的。尝试将函数更改为我建议的，然后将此：：onclick=>showstuff'content{g.id}修改为：onclick=>showstuff{g.id}@CarlaDessi本质上，您希望在调用函数时，而不是在声明函数时，从I ASSUE服务器端代码传递动态值。