Упрощение Jquery - PullRequest
Новая
       34

Упрощение Jquery

0 голосов
/ 10 ноября 2011

Я стараюсь изо всех сил упростить код ниже ....

Вы увидите, что есть 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>

1 Ответ

1 голос
/ 10 ноября 2011

Обернуть каждое изображение 

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