0

現在、ポートフォリオ用のウェブサイトに取り組んでいるので、挑戦したかったのです。

私の作品を展示するセクションは PHP でコーディングされており、データベースに接続されています。WHILE ループを使用すると、Web サイトにすべてのデータベース レコードが追加されます。

このサイトでは、Javascript を初めて使用することにしました。これをより難しくし、これについても学習します。

私が欲しいのは、PHP WHILE ループが追加するすべてのデータベース レコードの周りの境界線です。これは、カーソルを合わせたときにのみ表示され、サムネイルにカーソルを合わせるたびに色 (色の固定配列) が変わります。

これは私がこれまでに持っているコードです:

function loaded() {

        var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];
        var images = document.getElementById("thumbnails").getElementsByTagName("div");

        console.log(images);

        for (var i = 0; i < images.length; i++) {
            var rand   = Math.floor(Math.random()*colors.length);

            images[i].style.borderStyle = 'solid';
            images[i].style.borderWidth = '1px';
            images[i].style.borderColor = 'transparent';

            $(images[i]).hover(function(){
                console.log('hovering over');
                images[i].style.borderColor = colors[rand];
            }, function(){
                console.log('hovering out');
                images[i].style.borderColor = 'transparent';
            });

         };

};

私の問題は、それが機能しないか、部分的に機能することです。このコードは、WHILE ループが追加する最初のエントリにのみ適用されます。コンソールでは、「console.log(images)」が最初のエントリのみを返すことがわかります。

別の問題は、エラーも返すことです。

images[i] is undefined
images[i].style.borderColor = colors[rand];

現在悩んでいるのはこの2点です。Javascript を使用するのは初めてなので、初心者/簡単な間違いかもしれません。

言い忘れたことや知りたいことがあれば教えてください。返信をお待ちしております。

4

3 に答える 3

0

わかりました、最初に:(colors.length - 1)あなたが行きたいところです。長さ 3 の配列で、最高のキーとして 2 があります (0-indexed!)

2 番目: 実際の HTML を投稿できますか、それよりも良い方法: jsfiddle を取得して、実際にコードを修正したり、jsfiddle をフォークしたりできますか?

3 番目: jQuery を使用していることに気付きました。配列$('#thumbnails').find('div');を取得するためにjQuery を使用してみましたか? imagesあなたは何を得ますか？

于 2012-04-20T09:01:11.113 に答える
0

あなたが正しいと理解していれば、次のような HTML ページ (PHP で生成されたもの) が必要です。

<div id="thumbnails">
  <img src="..." />
  <img src="..." />
  <img src="..." />
  ...
</div>

また、境界線を追加したい画像の 1 つにカーソルを合わせると、マウスが画像から離れると境界線が削除されます。私はあなたがjQueryを使用していると仮定しているので、例えば各画像をクラスに追加して<img class="record" src="..." />、次のjavascriptを試すことができます:

$(function() {
  var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];

  $('.record').hover(
    function() {
      var rand = Math.floor(Math.random()*colors.length);

      $(this).css('border-style', 'solid');
      $(this).css('border-width', '1px');
      $(this).css('border-color', colors[rand]);
    },
    function() {
      $(this).css('border-style', 'none');
    }
  );
}).call(this);

カーソルが要素（この場合は画像）に入るたびに境界線が表示され、カーソルが離れると境界線が削除されます。

于 2012-04-20T09:15:51.790 に答える