Question

基本上当div显示或隐藏时，我想分别用“+”（隐藏时）和“ - ”（显示时）切换innnerHTML。它最初工作，但不是随后。

$('#summary-head').click(function(evt) {
    evt.preventDefault();
    $('#summary-bod').slideToggle(1000);
    $(this).toggleClass('close');
    if(document.getElementById('summary-head').innerHTML = "-  Professional Summary") {
        document.getElementById('summary-head').innerHTML = "+  Professional Summary";
    } else {
        document.getElementById('summary-head').innerHTML = "-  Professional Summary";
    };
});

这样做的正确方法是什么？这不起作用。

Answer 1

为什么不使用CSS：

＆＃13;

hidden

＆＃13;

$(document).ready(function(){
     $('.wrapper').click(function(){
          $(this).toggleClass('switch');
     });
});

＆＃13;

.wrapper .content2{
   display:none;
}

.wrapper.switch .content2{
    display:block;
}

.wrapper.switch .content1{
    display:none;
}

＆＃13;

jquery只是添加或删除了一个css类，css规则执行其余的

Answer 2

最简单的方法是将+ / -图标放在元素中自己的span中。然后，您可以为text()提供基于当前更新新设置的功能。像这样：

$('#summary-head').click(function(e) {
  e.preventDefault();
  $('#summary-bod').slideToggle(1000);
  $(this).toggleClass('close').find('span').text(function(i, t) {
    return t.trim() == '+' ? '-' : '+';
  });
});

#summary-bod { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="summary-head">
  <span>+</span>
  Professional Summary
</div>
<div id="summary-bod">
  Foo bar
</div>

请注意，使用jQuery时，最好坚持使用它公开的方法，而不是混合和匹配本机方法。在这种情况下，无论如何它们都是多余的，因为您已经通过this关键字引用了点击的元素。

Answer 3

您在if语句中为innerHTMl分配值。试试这段代码：

@Test
public void metaspaceTest() throws CannotCompileException, InterruptedException {

ClassPool cp = ClassPool.getDefault();
System.out.println("started");

for (int i = 0; i <= 100000; i++) {
    Class c = cp.makeClass("br.com.test.GeneratedClass" + i).toClass();
    Thread.sleep(1);
    if (i % 10000 == 0) {
    System.out.println(i);
    }
}

System.out.println("finished");
}

Answer 4

利用简单的css对利亚姆的回答略有不同。 ~表示直接寻找以下兄弟（。）。

.hide { display: none; }

.contentState:checked ~ .collapse {
  display: inline-block;
}

.contentState:not(:checked) ~ .expand {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="content">
    <input type="checkbox" id="professionalSummaryState" class="contentState hide" style="display:none;">
    <span class="collapse hide">-</span>
    <span class="expand hide">+</span>
    <label for="professionalSummaryState">Professional Summary</label>
  </div>
</div>

Answer 5

您的代码中存在错误。比较语句应使用＆＃34; ==＆＃34;，而不是＆＃34; =＆＃34;。尝试使用＆＃34; =＆＃34;这是一个非常常见的错误。比较 - 不要！

尝试以下方法：

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<div id = "summary-div">
  <span id ="summary-head">+  Professional Summary</span><br/>
    <div id = "summary-bod">
    This is a summary body
    </div>
</div>

<script>
$('#summary-head').click(function(evt) 
{
  evt.preventDefault();
  $('#summary-bod').slideToggle(1000);
  $(this).toggleClass('close');

  if (document.getElementById('summary-head').innerHTML == "-  Professional Summary") 
  {
    document.getElementById('summary-head').innerHTML = "+  Professional Summary";
  } 
  else 
  {
    document.getElementById('summary-head').innerHTML = "-  Professional Summary";
  };
});
</script>

</body>
</html>

也只是一个样式注释 - 这是个人偏好 - 恕我直言，如果您使用布尔标志来指示是否显示＆＃34; + text＆＃34;或者＆＃34; - 文字＆＃34 ;;在IF语句中设置/清除该标志，并根据标志而不是span / label / UI元素的内部html做出决定。另一个程序员可能会在以后更改并更改UI元素的文本（例如＆＃34; Executive Professional Summary＆＃34;而不是＆＃34; + Professional Summary＆＃34;）而没有意识到您已经在其他地方获得了代码取决于文字。在UI中更改文本不应该破坏代码。只是我的两分钱＆＃39;值得。

使用条件语句切换此innerHTML的正确方法是什么？

5 个答案: