0

我有一个可以选择的 div 数组(单击更改背景颜色以向用户表示)。

我想要一种将所有这些 div 的 id 提交到我的应用程序的方法,尽管看不到这样做的“好”方法;目前我唯一能做的就是有一个按钮,onclick 触发一个 javascript 函数,该函数获取 id 并将它们通过 POST 发送回我的服务器。

有没有一种方法可以在使用 div 而不是复选框或多选列表的表单上创建多选输入,或者是一种更好的方法来做我正在尝试的事情?

4

3 回答 3

1

每个 div 都有一个隐藏的输入,它们都具有相同的名称但具有不同的 id。单击 div 时,使用 id 更新相应的隐藏输入。然后,当您通过标准表单 POST 提交时,所有这些值都将通过您指定的名称可用。

于 2013-06-14T11:56:02.073 回答
1

假设您在selected用户“选择” div 时添加类:

var data = {};
$(".classOfDivs.selected").each(function(){
   data[$(this).prop('id')] = 'true';
}
$.ajax({
   url : 'ajaxPage.php',
   type : 'POST',
   dataType : 'text',
   cache: false,
   data: data,
   success : function(text){alert('Saved: '+text);},
   error: function(){alert('Did not reach server');}
});

根据需要使用success函数处理返回的文本。dataType可以更改为html,JSON等。请参阅.ajax()文档。

于 2013-06-14T11:57:04.783 回答
0

由于这是一个应用程序,您可以使用 JQuery javascript 库将所有​​内容存储在 HTML5 本地存储中。

以下是如何一步一步地做到这一点:

  1. 创建一个jquery数组
  2. 单击时,获取 div id 并将其与键/值对一起存储在数组中
  3. 如果再次单击,则将其从数组中删除
  4. 有一些事件监听器,如“提交”按钮,将数组的值存储到本地存储

这是我拥有的一个 jsfiddle,它正是您所说的:http: //jsfiddle.net/CR47/bqfXN/1/

它会更深入一点,但 jquery 应该正是您所需要的。

这比使用 POST 提交或使用 ajax 提交更好的原因是因为您说这是一个应用程序,您将能够离线使用此方法,而 post 或 ajax 需要连接到运行 php.ini 的服务器。

var skinCare=[];                                       //the array
$('.skinCare').click(function(){                       //onclick
    var value = event.target.className.split(" ")[0];  //get classname, you would get id
    var index = skinCare.indexOf(value);               //gets where the location in 
                                                       //the array this code is
    if($(this).hasClass('selected')){                  //when a div is clicked it gets
        //$('.skinCare').removeClass('selected');      //the class "selected" and adds
        skinCare.splice(index, 1);                     //to array, then another click
    } else if($.inArray(value, skinCare) == -1){       //removes it from array
        skinCare.push(value);
    }
});
$('.submitbutton').click(function(){
    localStorage.setItem('Skin Care', JSON.stringify(skinCare));

});
于 2013-06-14T12:05:14.233 回答