Question

我正在努力提高我的编码技能并开始学习jquery。我从简单的事情开始，比如做一个非常简单的图像展示。这是我到目前为止编写的代码。但它似乎太长而且效率不高。有什么方法可以改善这个吗？

HTML：

<div id="galerija">
  <div style="float: left; border: 1px solid red; width: 600px; height: 450px;background-image: url(images/gora_big_main.png);" class="big_image"></div>
  <div style="float:left;"id="trumbai">

  <div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_1.png);"class="trumb_1"></div>
  <div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_2.png);"class="trumb_2"></div>
  <div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_2.png);"class="trumb_3"></div>
  <div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_main.png);"class="main_trumb"></div>
  </div>
</div>

JS

<script type="text/javascript">
  $(function(){
    $(".trumb_1").click(function(){
      $(".big_image").css("background-image","url('images/gora_big_1.png')");
    });
  });
  $(function(){
    $(".trumb_2").click(function(){
      $(".big_image").css("background-image","url('images/gora_big_2.png')");
    });
  });
  $(function(){
    $(".trumb_3").click(function(){
      $(".big_image").css("background-image","url('images/gora_big_3.png')");
    });
  });
  $(function(){
    $(".main_trumb").click(function(){
      $(".big_image").css("background-image","url('images/gora_big_main.png')");
    });
  });
</script>

Answer 1

将样式分隔为链接的css文件，因此HTML中没有那么多重复的样式：

HTML：

<div id="galerija">
   <div id="big_image"></div>
   <div id="trumbai">

      <div id="t1" "class="trumb"></div>
      <div id="t2" "class="trumb"></div>
      <div id="t3" "class="trumb"></div>
      <div id="tmain" "class="trumb"></div>

   </div>
</div>

一个好的经验法则是，如果你在HTML中找到“style =”，你就会有太多的内联样式。

CSS：

#big_image
{
float: left;
border: 1px solid red;
width: 600px; height:
450px;background-image: url(images/gora_big_main.png);
}

#t1 {background-image: url(images/gora_trumb_1.png);}
#t2 {background-image: url(images/gora_trumb_2.png);}
#t3 {background-image: url(images/gora_trumb_3.png);}
#tmain {background-image: url(images/gora_trumb_main.png);}
#trumbai {float:left;}

.trumb //<--- notice how ALL of the styling for all class="trumb" is set in one place!
{
border: 1px solid red;
cursor: pointer;
width: 150px;
height: 75px;
}

在JavaScript中使用变量：

imageClick("#t1", "gora_big_1")
imageClick("#t2", "gora_big_2")
imageClick("#t3", "gora_big_3")
imageClick("#tmain", "gora_big_main")

 function imageClick(id, imageName)
{
       $(function(){
            $("").click(function(){
                $(id).css("background-image","url('images/' + imageName + '.png')");
            });
        });
}

注意我使imageClick（）成为一个非常通用的函数，以便可以在别处重复使用。我将带有id的函数称为参数，并将id完全保留在函数之外。然后可以无休止地回收一段代码。

Answer 2

这个怎么样？

$(function() {
    $('#trumbai div').click(function() {
        $('.big_image').css('background-image', 'url('+ $(this).data('image') +')');
    });
});

您要点击的div的数据属性image包含扩展图片的网址。

<div data-image="image/gora.png"></div>

Answer 3

为大图像的div添加数据属性，并为所有

提供一个公共类

<div data-big-image="images/gora_big_1.png" class="trumb" style...></div>

然后在jQuery中使用data属性：

$(function(){
        $(".trumb").on('click', function(){
            var bigImage = $(this).data('big-image');
            $(".big_image").css("background-image","url('" + bigImage + "')");
        });
    });

Answer 4

您可以执行以下操作来缩短代码：

$('[class^="trumb_"]').each(function() {
    $(this).click(function() {
        var i = $(this).index();
        i += 1;
        var imgUrl = "images/gora_big_" + i + ".png";
        $(".big_image").css("background-image","url('" + imgUrl + "')");
    })
});

$(".main_trumb").click(function(){
    $(".big_image").css("background-image","url('images/gora_big_main.png')");
});

DEMO： http://jsfiddle.net/255Qv/

如何缩短此代码的速度

4 个答案: