刷新内容jQuery

时间：2015-03-15 02:53:07

标签： javascript jquery html css

我正在开展一个小项目，我正在制作一个带有单选按钮的内容节目，就像一个幻灯片库，但我想要做的是一个容器内部有很多不透明度的大容器： 1;所有这些重叠的3个容器都具有相同的特性，所以当有人在单选按钮中给出一个clic时，容器的不透明度为1;会得到不透明度：0;容器的重叠容器具有不透明度：1;将是可见的。

我得到的主要问题是当我在单选按钮中更改内容时，这个（内容）在我重新加载页面之前不会出现，有人可以告诉我为什么会这样吗？以及如何解决它？

谢谢！

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

1 个答案:

答案 0 :(得分：0)

您需要使用更改处理程序，因为您希望在用户更改无线电元素的已检查状态时运行脚本

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

相关问题
最新问题