Question

: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";
}

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

这是呈现的代码：

<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>

Answer 1

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

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属性。

也许你打算做更像这样的事情：

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

然后你会这样称呼它：

showstuff(#{g.id});

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

javascript函数只看第一个元素

1 个答案: