単一の説明フィールドがあり、クリック時に変更可能な画像グリッド

Question

作成しようとしているのは、グリッドの下に1つのテキストフィールドがある画像グリッドです。そのフィールドには、最後にクリックされた画像の説明が含まれているはずです。私は、このようなそれぞれの画像を持ついくつかの浮動小数点divを含むdivとしてグリッドを実装しました。

HTML：：

<div id="ingredient-showcase"> 
    <div class="ingredient"><img src="..." alt="..." /></div> 
    <div class="ingredient"><img src="..." alt="..." /></div> 
    <div class="ingredient"><img src="..." alt="..." /></div> 
    ... 
</div> 

CSS：

#ingredient-showcase { 
    margin: auto; 
    width: 90% 
} 

.ingredient { 
    border: 1px solid #ccc; 
    height: 170px; 
    width: 170px; 
    float:left; 
    padding: 5px; 
} 

だから何がダイナミック説明ボックスを実装するための良い方法だろう私は、正確な実装は、ここで最も重要な部分ではない疑いがあるけれども？純粋なHTML/CSSで十分でしょうか（私はそう思わない）、あるいはJavaScript/jqueryが必要になるでしょうか？私はあなたが単に正確に同じ位置を持つ単一のボックスにすべてのdecillsを置くことができ、ちょうどクリックごとにそれぞれのzのインデックスを変更することができたと思います。しかし、それがベストプラクティスなのか、まったく問題ないのかは分かりません。

これまでにウェブを閲覧しているときにこれに対する回答が見つかりませんでした。これはまだ回答がない場合、他の人にも役立つことを願っています。

Answer 1

jQueryを使用するのは簡単です。要素に表示するテキスト、またはimgタグのaltまたはdata-属性に表示するテキストを保存して、そのテキストを取り込んで下部のdivに移入することができます。

$('.ingredient').on('click',function() { 
 
    $('#caption').html($(this).find('.meta').html()) 
 
})

.meta { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ingredient-showcase"> 
 
    <div class="ingredient"><img src="..." alt="..." /> 
 
    <div class="meta">1</div> 
 
    </div> 
 
    <div class="ingredient"><img src="..." alt="..." /> 
 
    <div class="meta">2</div> 
 
    </div> 
 
    <div class="ingredient"><img src="..." alt="..." /> 
 
    <div class="meta">3</div> 
 
    </div> 
 
    <div id="caption"></div> 
 
</div>

Answer 2

Zインデックスのことをしないでください。 JavaScriptまたはjqueryを使用して、ボックスに説明を入力します。あなたは、ALTタグからの説明を引っ張ったり、記述を含むデータ属性を追加し、そこから引き出し、このようなことができ、次のいずれか

$(function() { 
    $('.ingredient > img').click(function() { 
     $('#description').text($(this).data('description')); 
    }); 
}); 

：今

<div id="ingredient-showcase"> 
    <div class="ingredient"><img src="..." data-description="..." /></div> 
    ... 
</div> 
<div id="description"></div> 

を

jqueryのにちょうどこのような何かを行うことができますangular.jsと多分

Answer 3

var TMP_IMG_URL = "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png"; 
 

 
var $grid = $('#grid'); 
 
var $description = $('#description'); 
 

 
var columns = 3; 
 

 
var items = [{ 
 
    src: TMP_IMG_URL, 
 
    description: "Adipisicing nobis nihil et in velit minima Expedita quasi mollitia exercitationem non porro Nulla consectetur natus aspernatur officiis iure! Veritatis ullam excepturi repellendus consequuntur magni! Exercitationem laudantium praesentium sed facilis.", 
 
    alt: "I've no idea what alt is." 
 
    }, 
 
    { 
 
    src: TMP_IMG_URL, 
 
    description: "Consectetur quasi cum sit voluptates perspiciatis? Nobis aliquam corporis molestias pariatur nobis Repudiandae eaque fuga veritatis quaerat eligendi accusantium. Amet facilis quaerat nemo laboriosam aliquid? Labore eum accusantium molestiae nobis.", 
 
    alt: "I've no idea what alt is." 
 

 
    }, 
 
    { 
 
    src: TMP_IMG_URL, 
 
    description: "Adipisicing nobis nihil et in velit minima Expedita quasi mollitia exercitationem non porro Nulla consectetur natus aspernatur officiis iure! Veritatis ullam excepturi repellendus consequuntur magni! Exercitationem laudantium praesentium sed facilis.", 
 
    alt: "I've no idea what alt is." 
 

 
    }, 
 
    { 
 
    src: TMP_IMG_URL, 
 
    description: "Sit magnam nobis voluptas eos adipisci. Aspernatur neque explicabo saepe amet ad sint Ex laborum ullam veritatis obcaecati debitis Ab laudantium quo facilis delectus excepturi fugiat. Perspiciatis maiores atque saepe?", 
 
    alt: "I've no idea what alt is." 
 

 
    }, 
 
    { 
 
    src: TMP_IMG_URL, 
 
    description: "Consectetur non quibusdam adipisci sequi velit Voluptas architecto aliquid quis iusto fugit Voluptas porro ullam vitae quae iste, iusto? Id fugiat harum sit quis nisi eos Laborum similique id reprehenderit!", 
 
    alt: "I've no idea what alt is." 
 

 
    }, 
 
    { 
 
    src: TMP_IMG_URL, 
 
    description: "Sit culpa animi aperiam totam iusto odit Suscipit quia molestiae sunt amet ut Veniam fugit qui atque explicabo repellendus debitis? Libero atque in ut earum pariatur Libero nemo quae beatae?", 
 
    alt: "I've no idea what alt is." 
 

 
    } 
 
]; 
 

 
$description.text(items[0].description); 
 

 
var $row; 
 
items.forEach(function(item, index) { 
 
    if (index % columns === 0) { 
 
    $row = $('<div class="row">'); 
 
    $grid.append($row); 
 
    } 
 
    var $column = $('<div class="column">'); 
 
    var $img = $('<img alt="' + item.alt + '" src="' + item.src + '">'); 
 
    $column.append($img); 
 
    $column.css({ 
 
    width: 100/columns + '%', 
 
    float: 'left' 
 
    }); 
 
    $column.click(function() { 
 
    $description.text(items[index].description); 
 
    }); 
 
    $row.append($column); 
 
    // console.log(index, item); 
 
}); 
 

 
var $row = $('<div>');

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#over { 
 
    width: 80%; 
 
    margin: 20px auto; 
 
} 
 

 
.grid { 
 
    display: block; 
 
} 
 

 
.row { 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 

 
.column { 
 
    border: none; 
 
    display: block; 
 
} 
 

 
.description { 
 
    font-size: 12px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    padding: 3px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="over"> 
 
    <div id="grid" class="grid"></div> 
 
    <div id="description" class="description"></div> 
 
</div> 
 

 
<!-- grid is gonna be like this 
 
<div class="grid"> 
 
    <div class="row"> 
 
     <div class="column"><img src="" alt=""></div> 
 
     <div class="column"><img src="" alt=""></div> 
 
     <div class="column"><img src="" alt=""></div> 
 
     <div class="column"><img src="" alt=""></div> 
 
    </div> 
 
</div> 
 
-->

Answer 4

？

var app = angular.module('app', []); 
 

 
app.controller('IngredientController', function($scope) { 
 
    $scope.description = ''; 
 

 
    $scope.setDescription = function(description) { 
 
    $scope.description = description; 
 
    }; 
 

 
    $scope.ingredients = [{ 
 
     src: "...", 
 
     alt: "...", 
 
     description: "description 1" 
 
    }, 
 
    { 
 
     src: "...", 
 
     alt: "...", 
 
     description: "description 2" 
 
    }, 
 
    { 
 
     src: "...", 
 
     alt: "...", 
 
     description: "description 3" 
 
    } 
 
    ]; 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#over { 
 
    text-align: center; 
 
} 
 

 
#ingredient-showcase { 
 
    margin: auto; 
 
    display: block; 
 
    width: 90%; 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 

 
.ingredient { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    height: 170px; 
 
    width: 170px; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 
.ingredient img { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="app" id="over" ng-controller="IngredientController"> 
 
    <div id="ingredient-showcase"> 
 
    <div class="ingredient" ng-repeat="ingredient in ingredients" ng-click="setDescription(ingredient.description)"> 
 
     <img ng-src="{{ ingredient.src }}" alt="{{ ingredient.alt }}" /> 
 
    </div> 
 
    </div> 
 
    <div>{{ description }}</div> 
 
</div>

Answer 5

#ingredient-showcase { 
 
    margin: auto; 
 
    width: 90% 
 
} 
 

 
.ingredient { 
 
    border: 1px solid #ccc; 
 
    height: 170px; 
 
    width: 170px; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 
#description { 
 
    clear: both; 
 
    padding: 5px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app=""> 
 
    <div id="ingredient-showcase"> 
 
    <div class="ingredient" ng-click="description = 'description 1'"> 
 
     <img src="..." alt="..."> 
 
    </div> 
 
    <div class="ingredient" ng-click="description = 'description 2'"> 
 
     <img src="..." alt="..." /> 
 
    </div> 
 
    <div class="ingredient" ng-click="description = 'description 3'"> 
 
     <img src="..." alt="..." /> 
 
    </div> 
 
    ... 
 
    </div> 
 
    <p id="description">{{ description }}</p> 
 
</div>