Javascript 无法使用jQuery控制div html内容？

虽然我认为我以前成功地做到了这一点，但这次代码不能正常工作

我需要执行的想法是检查是否显示了tabheader div，然后在div为tabheader div隐藏时将（+）字符串替换为（-），反之亦然

以下是HTML代码：

<div>
    <div class="tabheader" value="1">
        <p> + sea food </p>
    </div>
    <div id="content_1" class="tabcontent">
        hi all 11111
    </div>
    <div class="tabheader" value="2">
        <p> + pizza </p>
    </div>
    <div id="content_2" class="tabcontent">
        hi all 222222
    </div>
    <div class="tabheader" value="3">
        <p> + sandwitches </p>
    </div>
    <div id="content_3" class="tabcontent">
        hi all 33333
    </div>
</div>

javascript代码

$('.tabheader').click(function() { 
    $('#content_'+$(this).attr("value")).toggle("slow"); 
    var header_content = $(this).html(); 
    if($(this).toggle()) {
        header_content = header_content.replace("+","-"); 
        $(this).html(header_content);  
    }
    else {
        header_content = header_content.replace(/\-/g,"+"); 
        $(this).html("header_content");  
    }
});

---

问题是，当我点击tabheader div时，它消失了！有人能告诉我问题出在哪里吗？

在您的其他情况下尝试更改此线路：

 $(this).html("header_content");

 $(this).html(header_content);

致：

检查这把小提琴：

---

我相信这就是你一直在寻找的东西。

这一行实际上是将你的div切换为不可见，这就是它消失的原因

 if($(this).toggle()) {

您需要测试它当前是否可见：

if($('#content_'+$(this).attr("value")).is(":visible")) {

第6行：如果（$（this）.toggle（））没有意义，$（this）.toggle（）返回this对象本身。它会切换header div而不是content div

和$（this.html（“header_content”）；不应该是其中的字符串

当切换为“slow”时，div状态不会立即改变，因此最好在调用切换之前检查contentdiv状态

以下是更新后的脚本：

<script type="text/javascript">
       $('.tabheader').click(function() {
       var header_content = $(this).html();
       if($('#content_'+$(this).attr("value")).css("display")=='none')
       {
           header_content = header_content.replace("+","-");
           $(this).html(header_content);
       }
       else{
           header_content = header_content.replace("-","+");
           $(this).html(header_content);
       }

       $('#content_'+$(this).attr("value")).toggle("slow");
});
</script>

$（'.tabheader'）。单击（函数（）{
var header_content=$（this.html（）；
if（$（'#content.'+$（this.attr（“value”））.css（“display”）=='none'））
{
页眉内容=页眉内容。替换（“+”，“-”；
$（this）.html（标题内容）；
}
否则{
页眉内容=页眉内容。替换（“-”、“+”）；
$（this）.html（标题内容）；
}
$（'#content.'+$（this.attr（“value”））.toggle（“slow”）；
});

美元（this）.toggle（）在做什么？您需要一个返回true或false的函数。我认为如果在我可以正确使用.toggle（showOrHide）的情况下切换$（this），则可以返回true。您能告诉我如何检测$（this）.toggle状态吗？您的代码有多个问题。首先，检查切换返回值的if条件（if始终返回非falsy值）。其次，您可能不想切换tabheader的可见性，我相信您只想在标题中用-替换+，反之亦然。@techfoobar我已经修复了我的代码，只需搜索（+）或（-）并替换它。但是我真的需要知道如何检查我个人的当前切换状态。要知道元素是否可见，可以在jQuery中使用$（element）.is（':visible'）。不，仍然是相同的问题。请你自己试试，帮我找出问题所在。

if($('#content_'+$(this).attr("value")).is(":visible")) {

<script type="text/javascript">
       $('.tabheader').click(function() {
       var header_content = $(this).html();
       if($('#content_'+$(this).attr("value")).css("display")=='none')
       {
           header_content = header_content.replace("+","-");
           $(this).html(header_content);
       }
       else{
           header_content = header_content.replace("-","+");
           $(this).html(header_content);
       }

       $('#content_'+$(this).attr("value")).toggle("slow");
});
</script>