質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

JavaScript/HTML 画像を一覧表示する方法を教えてください

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 715

score 7

HTMLとCSSとJavaScriptを使用して、ショッピングサイトのように画像とその説明(商品名や価格)を一覧で表示したいのですが、思ったように表示されず困っております。

下記はHTMLだけで作成した時のウェブページなのですが、
これと同じ見せ方で、今回はJavaScriptを使用する方法を探しています。
![イメージ説明

また、画像の場所とそのデータはJavascriptを用いて配列を使う方法で進めたいと考えています。

var images = [
  {
  num: 1,
  src: "images/matcha1_ura.JPG",
  url: "GreenTea",
  category: "matcha",
  info: "Matcha for Urasenke",
  price: 85
  },
  {
    num: 2,
    src: "images/matcha2_omote.JPG",
    url: "GreenTea",
    category: "matcha",
    info: "Matcha for Omotesenke",
    price: 85
  },
  {
    num: 3,
    url: "images/matcha3_mushanokouji.JPG",
    alt: "GreenTea",
    category: "matcha",
    info: "Matcha for Mushanokouji",
    price: 70
  },
  {
    num: 4,
    url: "images/matcha4_oribe.JPG",
    alt: "GreenTea",
    category: "matcha",
    info: "Matcha for Oribe",
    price: 70
  }
// 一部省略
];


上記の要素を画面上に表示するために下記の関数を作りました。

function callback () {
  let wrapper = document.getElementsByClassName('contentwrap')
  showAll();

function showAll(){

  let productpic = document.createElement('div');

    for (var i = 0; i < images.length; i++){
    let img = document.createElement('img');
    img.src = "<img alt='" + images.alt + "'" + " src='" + images[i].url + "'/>";
    img.style = "width: 100%";

    let detail = document.createElement('h4');
    detail.innerHTML = images[i].info;

    let price = document.createElement('p');
    price.innerHTML = '$' + images[i].price + '.00';

    let moreinfo = document.createElement('p');
    button.innerHTML = '<a href="#" title="read more">' + "More information" + '</a>';

    productpic.appendChild(img);
    productpic.appendChild(detail);
    productpic.appendChild(price);
    productpic.appendChild(moreinfo);

    wrapper.appendChild(productpic);
    }
}
}


画像を挿入したい場所のHTMLは下記のように書いています。

<div class="contentwrap">
  <article class="container"> <!-- start main part-->           
   </article>


CSSもまだ上手に使えないので、ページの見た目もとても悪いのですが、そこはご容赦ください...
初心者のため分からないことがたくさんあり、基本的な関数やDOMしか使えないのですが、ご教示いただけますと幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

このような形だと思います。

説明しやすくするため、「aaaa」という引数を使っていますが、
理解したあとに適切な名前に書き換えてください。

$(function () {
    Swing('#me'); // 文字列として渡す
});

// 汎用的に使うためにid名など要素を渡せるようにしたい
function Swing(aaaa) {
  $(aaaa).animate({
    left: "90%"
  }, 4000).animate({
    left: "0px"
  }, 4000);

  setTimeout(Swing(aaaa), 8000);
}

(「'header .logo'」や「'.item:not(.active) .icon'」など、
idやclassだけでなくCSSセレクタすべてが指定可能なので、私なら、「aaaa」を「selecter」などにします)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/11 05:25

    確認が遅くなってしまい申し訳ないです。回答くださりありがとうございます!このコードで試してみます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る