Не удается управлять содержимым div html с помощью jQuery?

Хотя я думаю, что сделал это раньше, но на этот раз этот код работает некорректно.Не удается управлять содержимым div html с помощью jQuery?

Идея мне нужно выполнить, чтобы проверить, если tabheader ДИВА предъявляются, а затем заменить (+) строку с (-), и наоборот, когда DIV является tabheader ДИВА скрыт.

Вот 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

Я думал, что может возвращать true, если $ (this) переключается, когда я могу правильно использовать .toggle (showOrHide). можете ли вы сказать мне, как определить статус $ (this) .toggle? – user504363

В вашем коде было несколько проблем. Во-первых, условие if проверяет возвращаемое значение переключения (если всегда возвращает значение, отличное от фальсификации). Во-вторых, вы, вероятно, не хотите переключать видимость табулятора, я считаю, что вы только хотели заменить + на - в заголовках и наоборот. – techfoobar

$('.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

Эта линия фактически переключает ваш div на невидимый, поэтому он уходит.

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

, что вы хотите, чтобы проверить, если он находится в видимой или не нравится:

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

источник

2011-12-25 06:19:58 codercake

линии 6: если ($ (это) .toggle()) не имеет смысла, $ (this) .toggle() возвращает сам этот объект. И он переключает заголовок div вместо содержимого div.

и $ (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

Не удается управлять содержимым div html с помощью jQuery?

ответ

Смежные вопросы