Question

我想要创建的是一个图像网格，网格下方有一个单独的文本字段。该字段应包含上次被点击的任何图像的描述。我将网格实现为一个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吗？我想你可以简单地将所有的描述放在一个具有完全相同位置的盒子中，然后只需每次点击就可以更改相应的z-indices。但我不确定这是不是最好的做法，甚至根本没有用。

到目前为止，我还没有在浏览网页时找到任何答案，所以如果这还没有得到回答，我希望它对其他人也有帮助。

Answer 1

使用jQuery非常容易。您可以存储文本以显示在元素中，甚至可以存储alt标记上的data-或img属性，然后获取该文本并在底部填充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-index的事情。只需使用JavaScript或jquery来填充描述框。您可以从alt标记中提取描述，也可以添加包含描述的数据属性并从中拉出，如下所示：

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

现在在jquery你可以做这样的事情：

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

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

也许使用angular.js？

＆＃13;

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

Answer 5

＆＃13;

**First Load encrypt library**
 $this->load->libery('encrypt');
 **Then set Config**
 $config['permitted_uri_chars'] = 'a-z 0-9~%.:_\'+,-=';
 <a href="<?php base_url('controller/function/'.$this->encrypt->encode($value));?>">
I hope work your encrypted url..

＆＃13;

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

＆＃13;

具有单个描述字段的图像网格，可在单击时更改

5 个答案: