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-*すると、独自の値を指定でき、完全に有効な HTML5 ですが、古いブラウザでも問題なく処理できます。

しかし、あなたのアイデアに関して考えなければならないことはもっとたくさんあります。これが SO に関する Q&A に多すぎるかどうかはわかりません。

于 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 に答える