Обновить содержимое jQuery

Я работаю над небольшим проектом, и я делаю показ контента с помощью переключателей, что-то вроде галереи слайд-шоу, но то, что я пытаюсь сделать, это большой контейнер со множеством div внутри непрозрачность: 1; все это перекрывает 3 контейнера больше с теми же характеристиками, поэтому, когда кто-то дает клик в переключателе, контейнер с непрозрачностью: 1; получит непрозрачность: 0; и наложенный контейнер контейнером с непрозрачностью: 1; будут видны.Обновить содержимое jQuery

Основная проблема, с которой я сталкиваюсь, заключается в том, что когда я кликнув на кнопке с радио для изменения содержимого, этот (контент) не появляется, пока я не перезагружу страницу, может кто-нибудь сказать мне, почему это происходит? и как его решить?

Спасибо!

$(document).ready(function(){ 
 

 
$("#op1").prop('checked',true); 
 
$("#op2").prop('checked',true); 
 
$("#op3").prop('checked',true); 
 
$("#op4").prop('checked',true); 
 
//$("#x").prop('checked',false); 
 

 
if ($("#op1").is(':checked')) { 
 
    if ($('#cont1').hasClass('contenedor-fotos-opacity')) 
 
    { 
 
     $('#cont1').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos1'); 
 
    } 
 
    $('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity'); 
 
    
 
} 
 

 
if ($("#op2").is(':checked')) { 
 
    if ($('#cont2').hasClass('contenedor-fotos-opacity')) 
 
    { 
 
     $('#cont2').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos2'); 
 
    } 
 
    $('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity'); 
 
    
 
} 
 
    
 
if ($("#op3").is(':checked')) { 
 
    if ($('#cont3').hasClass('contenedor-fotos-opacity')) 
 
    { 
 
     $('#cont3').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos3'); 
 
    } 
 
    $('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity'); 
 
    
 
} 
 

 
if ($("#op4").is(':checked')) { 
 
    if ($('#cont4').hasClass('contenedor-fotos-opacity')) 
 
    { 
 
     $('#cont4').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos4'); 
 
    } 
 
    $('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity'); 
 
    $('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity'); 
 
    
 
} 
 
    
 
});

#contenedor-portafolio { 
 
    
 
    position: relative; 
 
    width: 100%; 
 
    background: #222; 
 
} 
 

 
.fotos-portolio { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
    margin-top: 15px; 
 
    overflow: hidden; 
 
    background: #444; 
 
} 
 

 

 

 

 
.contenedor-fotos1 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: red; 
 
    z-index: 10; 
 
} 
 

 
.contenedor-fotos-opacity { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    opacity:0; 
 
    z-index: 10; 
 
} 
 

 

 

 
.contenedor-fotos2 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: green; 
 
    z-index: 11; 
 
} 
 

 

 

 
.contenedor-fotos3 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: blue; 
 
    z-index: 12; 
 
} 
 

 

 

 
.contenedor-fotos4 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: yellow; 
 
    z-index: 13; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>prueba cont-slider</title> 
 
     <meta charset="utf-8"/> 
 
     <link rel="stylesheet" type="text/css" href="css/content-slider.css"/> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script src="js/content-slider.js"></script> 
 
    </head> 
 
    <body style="width:100%; position:absolute; top: 0px; left: -8px;"> 
 
     
 
     <div id="contenedor-portafolio"> 
 
      <form> 
 
       <input type="radio" name="opacitylayer" id="op1"/> 
 
       <label for="op1">DISEÑO WEB</label> 
 
       
 
       <input type="radio" name="opacitylayer" id="op2"/> 
 
       <label for="op2">DISEÑO GRÁFICO</label> 
 
       
 
       <input type="radio" name="opacitylayer" id="op3"/> 
 
       <label for="op3">DISEÑO 3D</label> 
 
       
 
       <input type="radio" name="opacitylayer" id="op4"/> 
 
       <label for="op4">FOTOGRAFÍA</label> 
 
      </form> 
 
      <div id="cont1" class="contenedor-fotos1"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      <div id="cont2" class="contenedor-fotos2"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      <div id="cont3" class="contenedor-fotos3"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      <div id="cont4" class="contenedor-fotos4"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      
 
     </div> 
 
    </body> 
 
</html>

источник

2015-03-15 Amaury Permer

Вы должны использовать обработчик изменений, так как вы хотите, чтобы запустить сценарий, когда пользователь изменяет проверенное состояние радиоэлементов

$(document).ready(function(){ 
 

 
    $("#op2").prop('checked',true); 
 

 
    $("#op1, #op2, #op3, #op4").on('change', function(){ 
 
    if ($("#op1").is(':checked')) { 
 
     if ($('#cont1').hasClass('contenedor-fotos-opacity')) 
 
     { 
 
     $('#cont1').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos1'); 
 
     } 
 
     $('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity'); 
 

 
    } 
 

 
    if ($("#op2").is(':checked')) { 
 
     if ($('#cont2').hasClass('contenedor-fotos-opacity')) 
 
     { 
 
     $('#cont2').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos2'); 
 
     } 
 
     $('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity'); 
 

 
    } 
 

 
    if ($("#op3").is(':checked')) { 
 
     if ($('#cont3').hasClass('contenedor-fotos-opacity')) 
 
     { 
 
     $('#cont3').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos3'); 
 
     } 
 
     $('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity'); 
 

 
    } 
 

 
    if ($("#op4").is(':checked')) { 
 
     if ($('#cont4').hasClass('contenedor-fotos-opacity')) 
 
     { 
 
     $('#cont4').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos4'); 
 
     } 
 
     $('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity'); 
 
     $('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity'); 
 

 
    } 
 
    }).change() 
 
});

#contenedor-portafolio { 
 
    
 
    position: relative; 
 
    width: 100%; 
 
    background: #222; 
 
} 
 

 
.fotos-portolio { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
    margin-top: 15px; 
 
    overflow: hidden; 
 
    background: #444; 
 
} 
 

 

 

 

 
.contenedor-fotos1 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: red; 
 
    z-index: 10; 
 
} 
 

 
.contenedor-fotos-opacity { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    opacity:0; 
 
    z-index: 10; 
 
} 
 

 

 

 
.contenedor-fotos2 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: green; 
 
    z-index: 11; 
 
} 
 

 

 

 
.contenedor-fotos3 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: blue; 
 
    z-index: 12; 
 
} 
 

 

 

 
.contenedor-fotos4 { 
 
    width: 90%; 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    background: yellow; 
 
    z-index: 13; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>prueba cont-slider</title> 
 
     <meta charset="utf-8"/> 
 
     <link rel="stylesheet" type="text/css" href="css/content-slider.css"/> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script src="js/content-slider.js"></script> 
 
    </head> 
 
    <body style="width:100%; position:absolute; top: 0px; left: -8px;"> 
 
     
 
     <div id="contenedor-portafolio"> 
 
      <form> 
 
       <input type="radio" name="opacitylayer" id="op1"/> 
 
       <label for="op1">DISEÑO WEB</label> 
 
       
 
       <input type="radio" name="opacitylayer" id="op2"/> 
 
       <label for="op2">DISEÑO GRÁFICO</label> 
 
       
 
       <input type="radio" name="opacitylayer" id="op3"/> 
 
       <label for="op3">DISEÑO 3D</label> 
 
       
 
       <input type="radio" name="opacitylayer" id="op4"/> 
 
       <label for="op4">FOTOGRAFÍA</label> 
 
      </form> 
 
      <div id="cont1" class="contenedor-fotos1"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      <div id="cont2" class="contenedor-fotos2"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      <div id="cont3" class="contenedor-fotos3"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      <div id="cont4" class="contenedor-fotos4"> 
 
       <center> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       <div class="fotos-portolio"></div> 
 
       </center> 
 
      </div> 
 
      
 
     </div> 
 
    </body> 
 
</html>

Вы можете упростить, что

$(document).ready(function() { 

    $("#op2").prop('checked', true); 

    var $els = $('#cont1, #cont2, #cont3, #cont4'); 
    $("#op1, #op2, #op3, #op4").on('change', function() { 
     var id = this.id.substring(2), $el = $('#cont'+id); 
     if (this.checked) { 
      if ($el.hasClass('contenedor-fotos-opacity')) { 
       $el.removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos'+id); 
      } 
      $els.not($el).each(function(){ 
       $(this).removeClass('contenedor-fotos'+this.id.substring(5)) 
      }).addClass('contenedor-fotos-opacity') 
     } 
    }).change() 
});

Демо: Fiddle

источник

2015-03-15 03:00:56

Святой молли человек! ты лучший! Спасибо, очень спасибо! но, поскольку я новый (действительно новый) в jQuery, вы можете объяснить мне упрощенную версию? Я вообще не понимаю, что делает код :( –

Обновить содержимое jQuery

ответ

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