文章/答案/技术大牛

发布

社区首页 >问答首页 >简化Jquery

问简化Jquery
EN

Stack Overflow用户

提问于 2011-11-10 16:18:06

回答 1查看 144关注 0票数 0

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

你会看到有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>

loader

preloader

image

jquery

回答 1

Stack Overflow用户

发布于 2011-11-10 16:43:56

将每幅图像包装为

<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")
    });
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8082674

复制

相似问题

问简化Jquery
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简化JqueryEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简化Jquery
EN