JQuery DIV видимости переключатель не работает - PullRequest
Новая
       28

JQuery DIV видимости переключатель не работает

0 голосов
/ 20 августа 2009

У меня есть несколько div-ов для отображения демонстрационных блоков графики и кодовых блоков для отображения примера кода для использования графики. То, что я хочу сделать, это сделать поля кода невидимыми, пока вы не нажмете на демонстрационный блок - что должно сделать окно кода скользящим в поле зрения. ( Смотрите здесь, чтобы посмотреть, как это выглядит )

Это должно быть очень просто с jQuery, как я делал это несколько раз ранее, но по какой-то причине я не могу заставить его работать в этот раз.

Вот сокращенная версия моего кода. 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class code-*
  //$(".code-left").hide();
  //$(".code-right").hide();
-->
  //toggle the component with the respective class
  $(".demobox-dark").click(function()
  {
    $(this).next(".code-left").slideToggle(600);
  });
  $(".demobox-light").click(function()
  {
    $(this).next(".code-right").slideToggle(600);
  });
});
</script>

<div class="demobox-light">
    <div class="color_blacktext"> </div>
    <p>Black text</p>
</div>
<div class="demobox-dark">
    <div class="color_whitetext"> </div>
    <p>White text</p>
</div>
<p>Code:</p>
<div class="code-left">
    <p class="code">TEXT</p>
</div>

Может кто-нибудь заметить ошибку? Потому что я точно не могу. Опять же, я определенно не волшебник JavaScript.

Ответы [ 4 ]

2 голосов
/ 20 августа 2009

Если у вас есть только один «кодовый левый» и один «кодовый правый» на странице, ответ Фил будет отлично работать.

Если у вас есть более одного из них, и вы ловите щелчок на «demobox-dark», то пытаетесь получить next «code-left», потому что у вас есть параграф между два, это действительно не будет следующий .

Вы могли бы вместо этого использовать nextAll вместо next, чтобы сделать это? например, 

$(this).nextAll(".code-left:first").slideToggle(600);

Удачи!

0 голосов
/ 20 августа 2009

Funka s ответ работает хорошо. Я бы, наверное, пошел с более структурированным подходом. Предполагая, что каждый блок кода будет связан только с 1 демобоксом. Каждому демобоксу я бы дал идентификатор (на основе вашей демо-страницы) - 

$(".demobox").click(function()
{
    var $this = $(this);
    $("#" + $this.id() + "_code").slideToggle(600);
});

<div id="ubuntu_black_text" class="demobox demobox-dark">
</div>
<div id="ubuntu_white_text" class="demobox demobox-light">
</div>
<div id="ubuntu_black_text_code" class="code-left">
</div>
<div id="ubuntu_white_text_code" class="code-right">
</div>
0 голосов
/ 20 августа 2009

Когда я использую Firefox и выполняю некоторые ваши команды из консоли Firebugs $(this).next(".code-left") не возвращает никаких элементов. Я не думаю, что это очень красиво, но вы можете попробовать сделать что-то вроде 

next_code_block    = $(this).nextAll(".code-left")[0];
$(next_code_block).slideToggle(600);

Приветствие.

РЕДАКТИРОВАТЬ: хранится локальная переменная случайно.

0 голосов
/ 20 августа 2009 
$(".demobox-dark").click(function()
  {
    $(".code-left").slideToggle(600);
  });
  $(".demobox-light").click(function()
  {
    $(".code-right").slideToggle(600);
  });
...