使用jQuery無法控制div html內容？

雖然我認爲我成功之前就做到了，但是這段代碼此時無法正常工作。使用jQuery無法控制div html內容？

我需要執行的想法是，以檢查是否tabheader格的表現，然後更換（+）字符串（ - ），反之亦然當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的問題，它會消失！有人可以告訴我問題在哪裏嗎？

來源

2011-12-25 user504363

什麼是$（本）.toggle（）在做什麼？你需要一個返回true或false的函數。 – Emil 2011-12-25 05:57:42

我認爲如果$（this）被切換，而我可以正確使用.toggle（showOrHide），則可以返回true。你能告訴我如何檢測$（this）.toggle狀態嗎？ – user504363 2011-12-25 06:09:20

您的代碼有多個問題。首先，if條件檢查toggle的返回值（如果總是返回非falsy值）。其次，你可能不想切換tabheader的可見性，我相信你只是想在頭文件中替換+，反之亦然。 – techfoobar 2011-12-25 06:16:28

$('.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"); 
});

檢查此琴：http://jsfiddle.net/wNsMs/1/

我相信這是你要找的人。

來源

2011-12-25 06:14:25 techfoobar

嘗試改變這條線在你的其他條件：

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

到：

$(this).html(header_content);

來源

2011-12-25 05:58:42 legendofawesomeness

不，還是一樣的問題。請自行嘗試並幫助我找到問題。 – user504363 2011-12-25 06:02:33

這條線實際上是切換你的div不可見，這就是爲什麼它消失。

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

你想要的是測試如果它是當前可見的還是不喜歡這樣的：

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

來源

2011-12-25 06:19:58 codercake

行6：如果（$（本）.toggle（））沒有意義，$ （this）.toggle（）返回這個對象本身。它切換標題div而不是內容div。

and $（this）.html（「header_content」）;不應該是一個字符串。

而當切換爲「慢」時，div狀態不會立即改變，所以最好在調用切換之前檢查內容div的狀態。

以下是更新後的腳本：

<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>

來源

2011-12-25 06:32:08 Gormit

使用jQuery無法控制div html內容？

回答

相關問題