Question

我正在努力简化下面的代码......

你会看到有3个不同的图像触发大图像，我想你可以把它称为可点击的幻灯片。我想在用户点击图片时添加预加载的图片。

另外，请记住这是一个2,3,4批次。我希望尽可能让它干净利落。

有什么想法吗？

<html>
<head>
<style type="text/css" media="screen">
#loader.loading {
    background: url(http://jqueryfordesigners.com/images/spinner.gif) no-repeat center center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#ml-games-collection .game1-btn").click(function () {
        $("#ml-display li.game").removeClass("hide").css("display", "none");
        $("#ml-display .game1").show();
    });

    $("#ml-display .game1-ss1 img").bind("click", function () {
        $("#ml-display .game1-large-display").attr({
            "alt": "img alt 1 - screenshot 1",
            "src": "image 1"
        });
    });
    $("#ml-display .game1-ss2 img").bind("click", function () {
        $("#ml-display .game1-large-display").attr({
            "alt": "img alt 2 - screenshot 1",
            "src": "image 2"
        });
    });
    $("#ml-display .game1-ss3 img").bind("click", function () {
        $("#ml-display .game1-large-display").attr({
            "alt": "img alt 3 - screenshot 1",
            "src": "image 3"
        });
    });



</script>
</head>

<body>
<div class="column span-20 last game" id="ml-display">
  <ul style="padding-bottom:0;" class="game-list  no-list-style">
    <li class="game1 game" style=""> 
     <div id="loader" class="loading">
    <img width="500" height="313" alt="img alt 2 - screenshot 1" src="" class="game1-large-display right">
      <ul class="screen-shots no-list-style">
        <li><a title="" class="game1-ss1 click"><img alt=" Tiny Screen Shot" src=""></a></li>
        <li><a title="" class="game1-ss2 click"><img alt=" Tiny Screen Shot" src=""></a></li>
        <li><a title="" class="game1-ss3 click"><img alt=" Tiny Screen Shot" src=""></a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Answer 1

包装每张图片

<a href="url-of-bigger-picture.jpg" title="text to use for alt">
    <img ...>
</a>

然后你的JS变成了：

$("#ml-games-collection .game1-btn").click(function () {
    $("#ml-display li.game").removeClass("hide").css("display", "none");
    $("#ml-display .game1").show();
});

$("#ml-display .game1-ss1 .clickable").bind("click", function (event) {
    var target = $(event.target);

    $("#ml-display .game1-large-display").attr({
        "alt": target.attr("title"),
        "title": target.attr("title"),
        "src": target.attr("href")
    });
});

简化Jquery

1 个答案: