Javascript 如何缩短此代码

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

Html:

JS

$（函数（）{
$（“.trumb_1”）。单击（函数（）{
$（“.big_image”）.css（“背景图像”、“url（'images/gora_big_1.png'））；
});
});
$（函数（）{
$（“.trumb_2”）。单击（函数（）{
$（“.big_image”）.css（“背景图像”、“url（'images/gora_big_2.png'））；
});
});
$（函数（）{
$（“.trumb_3”）。单击（函数（）{
$（“.big_image”）.css（“背景图像”、“url（'images/gora_big_3.png'））；
});
});
$（函数（）{
$（“.main_trumb”）。单击（函数（）{
$（“.big_image”）.css（“背景图像”、“url（'images/gora_big_main.png'））；
});
});

这个怎么样

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

要单击的div具有数据属性

image

，其中包含扩展图像的URL，如下所示

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

---

为您的div添加一个数据属性以获得大图像，并为所有div提供一个公共类

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

---

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

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

---

演示：

将您的样式分离到一个链接的css文件中，这样您就不会在HTML中有太多重复的样式：

HTML:

---

请注意，我使imageClick（）成为一个非常通用的函数，以便可以在其他地方重复使用。我使用ID作为参数调用函数，并将ID完全排除在函数之外。一段代码就可以无限循环使用。

您可能需要：1。避免内联样式2。使用实际图像或

标记代替背景图像3。将事件委派与

.on（）

一起使用。此外，最好在元素的开头有类和ID，然后是属性。类似这样：

这个问题可能在上有一个更合适的论坛。看起来背景图像的URL也发生了变化。注意，发布后-更新。

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

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

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

<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>

#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;
}

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