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 を関数から完全に除外します。コードの 1 つのブロックは無限に再利用できます。

于 2013-01-19T10:06:34.650 に答える
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 に答える
0

これはどう？

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

クリックする div にはimage、展開された画像への URL を含む data 属性があります。

<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 に答える