2

我正在制作一个有照片页面的网站。在照片页面上，我想要相册和单张照片。我还希望用户能够创建新专辑，只需单击我的“+创建专辑”按钮，然后只需单击他们希望存储在该专辑中的图像即可。我不确定我需要知道该怎么做。我知道如何创建一个表单，这基本上是我需要的，并使用 php 将数据存储在我的数据库中以创建相册，但我不知道该怎么做是让用户从我的表单中输入值只需在相册中单击他们想要的图像。这是一个带有步骤的插图。

专辑创作过程

4

2 回答 2

7

基本上要回答您关于“如何将用户定义的值从图像获取到表单”的问题，您可以使用它：

演示

http://jsfiddle.net/insertusernamehere/DdNZz/

JavaScript

$(document).ready(function () {

    // add event handler to the image
    $('#image').click( function(event) {

        // put value into the input field
        $('#input').val( $(this).data('myvalue') );
    });
});

HTML

<img id="image" src="http://lorempixel.com/output/nightlife-q-c-200-200-4.jpg" data-myvalue="image one clicked" alt="">
<input type="text" id="input" value="">

使用data-*-attribute 可以让您指定自己的值，并且是完全有效的 HTML5，而旧版浏览器也可以毫无问题地处理它。

但是关于您的想法还有很多要考虑的事情，我不确定这对于关于 SO 的问答是否过多。

于 2012-07-19T19:34:08.567 回答
0 
<img class="click-the-picture" src="photo1.jpg">
<img class="click-the-picture" src="photo2.jpg">
<img class="click-the-picture" src="photo3.jpg">

<form id="theform">
<button>Save</button>
</form>

<script>
$(function(){
   $('.click-the-picture').live('click',function(){
       $('#theform').append('<input type="hidden" name="photo[]" value="' + $(this).attr('src') + '"');
   });
});
</script>

您可以尝试使用此代码为每次图片点击生成隐藏输入，然后将它们发送到数据库

于 2012-07-19T19:30:21.050 回答