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

Question

虽然我认为我之前已经成功完成了，但是这次这段代码无法正常工作。

我需要执行的想法是检查是否显示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>

CSS 代码:

.tabcontent {
    display: none;
}
.tabheader {
    height: 24px;
    width: 80%;
    background-color: #B2BBD0;
    margin: 18px;
    direction: rtl;
    text-align: right;
}

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时，它消失的问题!谁能告诉我问题出在哪里？

Answer 1

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

检查这个 fiddle :http://jsfiddle.net/wNsMs/1/

我相信这就是您正在寻找的。