Question

<style>
  .active {position:relative!important;}

    .animate {
      -webkit-transition:all .3s;
      -moz-transition:all .3s;
      -ms-transition:all .3s;
      -o-transition:all .3s;
      transition:all .3s
    }

    .box{
      height:200px;
      background-color:gray;
      border:1px solid black;
    }
    #test {
      -webkit-transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1);
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
      position:relative;
      width:3805px;
    }
  }
  #div1, #div2, #div3, #div4, #div5 {float: left;}

  #div1 {
    position: absolute;
    left: 0px;
    width:761px;
  }
  #div2 {
    position: absolute;
    left: 761px;
    width:761px;
  }
  #div3 {
    position: absolute;
    left: 1522px;
    width:761px;
  }
  #div4 {
    position: absolute;
    left: 2283px;
    width:761px;
  }
  #div5 {
    position: absolute;
    left: 3044px;
    width:761px;
  }
  #div6 {
    position: absolute;
    left: 3805px;
    width:761px;
  }
</style>
<div class="effect" id="test">
<div class="box" id="div1"><img src="http://shop.until.com.au/images/MosaicPlate-sm.jpg">DIV1</div>
<div class="box" id="div2"><img src="http://images.fnp.in/0/images/product/1_EgglessBlackforest_s.jpg">DIV2</div>
<div class="box" id="div3"><img src="http://1.imimg.com/data1/D/S/MY-991522/corporate-gifts-250x250.jpg">DIV3</div>
<div class="box" id="div4"><img src="http://cdn.appstorm.net/web.appstorm.net/files/2011/12/Gift_poll1.png">DIV4</div>
<div class="box" id="div5"><img src="http://content.modaco.net/dropzone/presenticon.png">DIV5</div>
</div>
<button type="button" class="a1">1</button>
<button type="button" class="a2">2</button>
<button type="button" class="a3">3</button>
<button type="button" class="a4">4</button>
<button type="button" class="a5">5</button>

<script>
  $("document").ready(function(){
    $(".a1").click(function(){
      $(".box").removeClass( "active" );
      $("#div1").addClass( "active" );
      $("#test").css({"-webkit-transform":"translate3d(0%, 0px, 0px) scale3d(1, 1, 1)"});
      $("#test").addClass( "animate" );
    });
  $(".a2").click(function(){
      $(".box").removeClass( "active" );
      $("#div2").addClass( "active" );
      $("#test").css({"-webkit-transform":"translate3d(-20%, 0px, 0px) scale3d(1, 1, 1)"});
      $("#test").addClass( "animate" );
    });
  });
</script>

Q1： 在上面的代码中，如何在单击按钮“1”并且不加载其他图像时使用AJAX加载图像。

Q2： 上面的Jquery脚本用于按钮“1”和“2”以显示div。同样的事情可以用于保留按钮以显示其他div，但有没有像迭代div那样的方法。基本上我不想为所有按钮重复相同的代码。

http://jsfiddle.net/5f6Wg/167/

Answer 1

这是调整：

jQuery代码：

$("document").ready(function () {
    $('[class^="a"]').filter(function () {
        return this.className.match(/\d+$/);
    }).click(function () {
        var i = ($(this).index() - 1);
        $(".box").removeClass("active");
        $("#div" + i).addClass("active");
        $("#test").css({
            "-webkit-transform" : "translate3d(0%, 0px, 0px) scale3d(1, 1, 1)"
        });
        $("#test").addClass("animate");
    });
});

代码说明：

$('[class^="a"]')

将选择所有以'a'开头的类名称的元素然后我们必须过滤以类号

结尾的类

.filter(function () {
    return this.className.match(/\d+$/);
})

现在，我们的欲望元素选择，我们可以使用jQuery事件做任何事情：）

这是 Fiddle Demo

Answer 2

这里有一个类似的问题：Load Image On Click With AJAX (jQuery)

您可以采用给定的答案

$(function(){
   $("#imgUser").load("images/testimg.jpg");  
});

只需使用点击处理程序中的第二行。

编辑：到Q2：

如果您将按钮的类别从aX更改为X，则可以使用类似

的功能

$("button").click(function(){
  var x = $(this).attr('class');
  $(".box").removeClass( "active" );
  $("#div"+x).addClass( "active" );
  $("#test").css({"-webkit-transform":"translate3d(-20%, 0px, 0px) scale3d(1, 1, 1)"});
  $("#test").addClass( "animate" );
});

如何在给定代码中使用AJAX来加载图像

2 个答案: