Question

我的文章列表存在问题。我想制作“看到更多”按钮，但是当我点击“更多...”时，我创建的代码只显示了最新的动态。也许你有一些想法如何让它发挥作用？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel>
        <local:UserControl1 />
        <local:UserControl1 />
        <local:UserControl1 />
        <local:UserControl1 />
        <local:UserControl1 />
    </StackPanel>

</Grid>

Answer 1

您不能拥有多个具有相同id值的元素。我摔倒您的元素具有相同的id，它只会影响最后一个元素用id说。您需要添加一个数字或类似的结尾 id值就像这个例子id="moretext_1"那样，当事件发生时在该元素上触发时，您可以指定id this.id 确定要控制的元素。

这使用上面解释的方法，有更简洁的方法来做到这一点。也许你自己加强吧。

＆＃13;

function showMore(idval) {
  var text = document.getElementById('read_more_'+idval);
  if (text.style.display === "block") {
    text.style.display = "none";
    } else {
    text.style.display = "block";
  }
}

＆＃13;

<div id="articleContent">Some content</div>
<button onclick="showMore(this.id);" id="x1">Toggle More...</button>
<div id="read_more_x1" style="display:none;">test 1</div>
<hr>
<div id="articleContent">Some content</div>
<button onclick="showMore(this.id);" id="x2">Toggle More...</button>
<div id="read_more_x2" style="display:none;">test 2</div>
<hr>
<div id="articleContent">Some content</div>
<button onclick="showMore(this.id);" id="x3">Toggle More...</button>
<div id="read_more_x3" style="display:none;">test 3</div>

＆＃13;

同样与帖子一致，下面是如何循环增加变量i的示例。

var text = '<div id="articleContent" class="mdl-card__supporting-text item">Some content </div>
<button onclick="showMore(this.id);" id="x'+i+'" class="mdl-button mdl-js-button mdl-button--primary"> Toggle More... </button>
<div id="read_more_x'+i+'" style="display:none;">test '+i+'</div>'

如何仅显示/隐藏列表中的一个选定项目

1 个答案: