Несколько скрыть шоу div

Я пытался сделать это весь день. В конце мне удалось заставить его работать. Я знаю, что это не лучший способ.Несколько скрыть шоу div

Может кто-нибудь, пожалуйста, покажет мне лучший способ. Мне всего 12. Он также не должен быть флажком. Это может быть просто текст. Я получил идею от ком/2006/12/14/с использованием-JQuery-к-шоу-прятки форм-элементы на основе-на-флажок отбора/

мне удалось загрузить его на http://utilitybase.com/paste/wmq

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme").click(function(){ 

     // If checked 
     if ($("#checkme").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra1").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme1").click(function(){ 

     // If checked 
     if ($("#checkme1").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra1").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra1").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra2").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme2").click(function(){ 

     // If checked 
     if ($("#checkme2").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra2").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra2").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra3").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme3").click(function(){ 

     // If checked 
     if ($("#checkme3").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra3").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra3").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra4").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme4").click(function(){ 

     // If checked 
     if ($("#checkme4").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra4").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra4").hide("fast"); 
     } 
     }); 

    }); 
</script> 
</head> 

<body> 

<div style="width: 800px;"> 
     <form> 

      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme" type="checkbox" /> 

      <div id="extra"> 
      <input type="text" name="input" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme1" type="checkbox" /> 

      <div id="extra1"> 
      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme2" type="checkbox" /> 

      <div id="extra2"> 
      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme3" type="checkbox" /> 

      <div id="extra3"> 
      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme4" type="checkbox" /> 

      <div id="extra4"> 
      <input type="text" name="" maxlength="30" /> 
      </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </form> 
</div> 
</body> 
</html>

источник

2010-10-29 emre

Ваше форматирование вызывает рак глаз ... попробуйте http://stackoverflow.com/editing-help – pex

Я знаю ... Это на http://utilitybase.com/paste/wmq сейчас – emre

Если я вас правильно, вы можете играть с

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var prototype = $('.prototype').clone(); 

     $('.prototype > input[type="checkbox"]').live('click', function() { 
     if($(this).is(':checked')) { 
      var clone = prototype.clone(); 
      clone.find('input[type="checkbox"]').attr('checked', false); 
      $(this).parent('.prototype').append(clone); 
     } else { 
      $(this).parent('.prototype').find('.prototype:last').remove(); 
     } 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <form> 
    <div class="prototype"> 
     <input type="text" name="" maxlength="30" /> 
     <label for="checkbox"> Check to enter another email address:</label> 
     <input id="checkme" type="checkbox" /> 
    </div> 
    </form> 
</body> 
</html>

EDIT: Это дополнение новая ввода/метка/Флажок прототип внутри текущего или удаляет это дети, с другой стороны. Вы также можете добавить идентификаторы в поля.

источник

2010-10-29 21:56:58 pex

работает почти идеально. если вы нажмете 4-5 раз и попытаетесь разжать его и снова щелкните по нему, он не будет закрываться по одному. он закрывает 3-4 из них, и если вы нажмете верхнюю, она откроет 1 в конце. – emre

Я посмотрю на него – pex

тот хорошо.

Пробовали ли вы .each или .live

http://api.jquery.com/each/

http://api.jquery.com/live/

источник

2010-10-29 21:05:57 zod

Я пытаюсь вставить код здесь, но он не работает – emre

Вставить код ... выбрать и использовать 1010 в этом редакторе – zod

Я здесь новый. – emre

Хм. Глядя на ваш код на UtilityBase. Возможно, попробуйте использовать функцию jquery .siblings(). Тогда для щелчка флажка вы можете сделать $(this).siblings('div').hide()/show();

источник

2010-10-29 21:38:34

Это обычно работает для меня

$("div[id^='extra']").click(function(){ 
    $div = $(this); 
    divID = $div.attr("id").substring(5); 

//Hide div w/id extra 
     $div.css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme"+divID).click(function(){ 

     // If checked 
     if ($("#checkme"+divID).is(":checked")) 
     { 
      //show the hidden div 
      $div.show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $div.hide("fast"); 
     } 

});

Это должно держать вас от необходимости писать одно и то же множественную timesdiv

источник

2010-10-29 21:51:12 Adam

Я не мог заставить это работать. – emre

Вы могли бы попробовать что-то вроде это:

// isolate the first div. You can surely find a better way, 
// using classes, containers, etc., but this works for now. 
// Hide all the others. 
$('div:has(input):not(:first)').hide(); 

// For each checkbox, open the next div 
$('input:checkbox').click(function(){ 
    if($(this).is(':checked')) { 
    $(this).next('div').show('fast'); 
    } else { 
    $(this).next('div').hide('fast'); 
    } 
});

источник

2010-10-29 21:51:39

Несколько скрыть шоу div

ответ

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