0

私は現在、私のウェブサイトに参加する新しいユーザーのために「ウェルカム/ウォークスルー」を作成しています.

最初に、彼らが好きな最近の/トップのアップロードで迎えられます。これは、私のウェブサイトが彼らが望む画像を見つけるのに役立ちます. しかし、私の質問は、ユーザーが好きなものを選択できるようにする最善の方法は何ですか? 現在、私はこれを持っています。

http://jsfiddle.net/BKjJV/

ここで私が達成しようとしていることを理解していただければ幸いですが、そうでない場合は、要約すると、

ユーザーが (n) 個の画像をいいねをクリック -> クリックを続行 -> ページは、いいね! されたすべての画像を取得し、データベースに追加するファイルに送信します。

4

2 に答える 2

0

あなたは簡単な方法で行うことができます.javascriptコードは

$('#continue').on('click', 'input', function(e) {
    var selection = [];
    $('.item').filter(function() {
        return $(this).find('.clicked').css('display') == 'block';
    }).each(function() {
        selection.push($(this).find('img').attr('src'));
    });

    alert(JSON.stringify(selection));

    $.post('http://www.example.com', {
        "selection": JSON.stringify(selection)
    }, function(data) {
        console.log(data);
    });
    return false;
});

更新されたフィドルのデモを見てください

于 2012-08-11T18:07:30.437 に答える
0

コードを指定する最も簡単な方法は、「次のページのボタン」のようなものです。ユーザーが選択した画像を確認し、ajax を介してその名前を php ページに送信し、データベースでチェックして追加します。

$(document).ready(function(){
    var images = new Array(); //images clicked will be stored here 
    $('#next_page_button').click(function(e){ //button that will send users to the next page
        e.preventDefault(); 
        $('.item').each(function(){ //for each image
            if($(this).find('.clicked').is(":visible")){ //see if the user has clicked on it
               images.push($(this).find('img').attr('src')); //and if so add it to the array
            }
        });
        $.ajax({   //time to send it to the php page
            url: '', //url of it
            type: 'POST',
            data: {images: encodeURIComponent(images.join())}, //lets merge the array and create a query string of the image separated by a comma and encode them to be sent via POST
            success: function(data){
                    //if the database actions went well, user will be send to the next page
            }                               
        });
    });
});

PHP ページで を取得し、 explode (',' $_POST['images']) を$_POST['images']介して変数を分割し、配列を循環してチェック/データベースに追加します。foreach

ちょっとした提案: id を使用して「一意の」画像を作成し、ページに表示して、データベースでの「チェック/追加」を容易にする必要があります。テキスト比較の代わりに一意の数値インデックスを使用すると、高速で信頼性が高くなります。

于 2012-08-11T16:07:12.710 に答える