Question

我做了一个小剧透

<p id="xyz" class="class" onclick="if(document.getElementById
  ('zyx') .style.display=='none') {document.getElementById
  ('zyx') .style.display='block'}else{document.getElementById
  ('zyx') .style.display='none'}">Spoiler</p>
<div id="zyx">Some content</div>

我正在寻找一种方法，如果扰流板关闭则添加'+'，如果扰流板对段落打开则添加' - '。我想的可能是一个if语句，如

If xyz display:none show +, else show -

有人想过吗？非常感谢

Answer 1

添加this.innerHTML以设置html标记。像下面的代码：

<p id="xyz" class="class" onclick="if(document.getElementById
  ('zyx') .style.display=='none') {document.getElementById
  ('zyx') .style.display='block';this.innerHTML='- Spoiler';}else{document.getElementById
  ('zyx') .style.display='none';this.innerHTML='+ Spoiler';}">- Spoiler</p>
<div id="zyx">Some content</div>

Answer 2

更好的方法是

 <p id="xyz" class="class" onclick="var zyx= document.getElementById('zyx');zyx.style.display=zyx.style.display=='none'?'block':'none';var sp=this.innerHtml;sp=sp=='Spoiler +'?'Spoiler -':'Spoiler +';">Spoiler</p>

一些内容

Answer 3

首先，我不会使用onclick属性来执行此操作。将代码放入HTML中是一种反模式。您已经在使用jQuery了，所以让我们使用它。

首先，我们可以通过zyx切换toggle的展示率。然后，我们可以使用段落上的类和一些CSS切换段落上的+和-。

＆＃13;

$("#xyz").click(function() {
  $("#zyx").toggle();
  $(this).toggleClass("expanded");
});

＆＃13;

p .minus {
  display: none;
}
p.expanded .minus {
  display: inline;
}
p.expanded .plus {
  display: none;
}

＆＃13;

<p id="xyz" class="class">Spoiler <span class="plus">+</span><span class="minus">-</span></p>
<div id="zyx" style="display: none">Some content</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

当段落中包含班级expanded时，会显示-;如果没有，则会显示+。

您也可以通过切换跨度的可见性来更改+和-，使用跨度上的::after内容...

Answer 4

您需要jQuery is它将为选择器返回true / false：

if($('#xyz').is(':visible')){
   //if visible case add +
   $('#xyz').text($('#xyz').text() + ' + ');
}
else{
   $('#xyz').text($('#xyz').text() + ' - ');  
}

Answer 5

在这种情况下，我建议使用带有:before的伪content: '+'元素，因为它是专门为此目的而设计的：插入装饰元素。执行此操作时，您应该分配一个类并在该项上应用样式，因为选择器.class[style*='display: none']可能会导致跨浏览器兼容性问题。见T.J.克劳德的答案。

但是，我建议在没有JS的情况下使用不同的方法。您可以使用隐藏的复选框元素。除了由于复杂性降低而不易出错之外，这很容易设计和实现。

您可以找到注释来源here的工作示例。

带有css条件的javascript if语句

5 个答案: