0

我正在努力提高我的编码技能并开始学习 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>
4

4 回答 4

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 完全排除在函数之外。然后可以无限循环地回收一个代码块。

于 2013-01-19T10:06:34.650 回答
0

这个怎么样？

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

要单击的 div 具有image包含扩展图像的 URL 的数据属性，如下所示。

<div data-image="image/gora.png"></div>
于 2013-01-19T09:11:38.797 回答
0

为大图像添加一个数据属性到您的 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 + "')");
        });
    });
于 2013-01-19T09:12:45.273 回答
0

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

$('[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')");
});

演示：http: //jsfiddle.net/255Qv/

于 2013-01-19T09:34:24.280 回答