0

我正在为我的网站设置一个时间表制作小部件。主题包含在单独的 DIV 中，然后将这些 DIV 拖到表格上的列中。参见示例： http: //jsfiddle.net/x5T4h/2/（感谢您之前的帮助）

现在我在桌子下面有一堆隐藏的输入

<input type="hidden" name="monday" value="">
<input type="hidden" name="tuesday" value="">
<input type="hidden" name="wednesday" value="">
<input type="hidden" name="thursday" value="">
<input type="hidden" name="friday" value="">
<input type="hidden" name="saturday" value="">
<input type="submit" name="submit" class="btn green disabled" value='Save'>

每个主题 DIV 都有一个带有它的 ID 的类，例如<div id="drag" class="21">Biology</div>

有没有什么方法可以让 Javascript 获取列中每个 DIV 的类，并根据日期将其（按顺序）添加到隐藏输入中。

它看起来很复杂，我不知道，所以非常感谢任何帮助。

我的JS已经：

<script>
$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            if($(ui.draggable).hasClass('draggable-source'))
                $( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
            else
                $( ui.draggable ).appendTo( this );

            console.log(this.id)
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
})
</script>
4

2 回答 2

2

嗯……似乎有点棘手……试试这个（尚未测试）

window.readDays = function() {
    $( 'table#days .day' ).each( function() {
        var vals = [];
        $( '.ui-draggable > div', $(this) ).each(function() {
            vals.push( $(this).attr('class') );
        } );
        $( 'input[name="'+ $(this).attr('id') +'"]' ).val( vals.join(','));
    } );
}
于 2012-10-28T12:49:21.883 回答
1

不清楚你想要什么格式的值，所以逗号分隔作为起点是有意义的。目前尚不清楚您希望通过什么事件来触发它。

$('#days .day' ).each(function(){
  var day=this.id; 
   var items= $(this).find('div').map(function(){
       /* text of item seems like only place currently to retrieve the title of item*/
       return $(this).text();
   }).get()
   $( 'input[name="'+ day+'"]' ).val( items.join(','));
});

演示：http: //jsfiddle.net/x5T4h/5/

您可能会使用 ajax 提交所有数据，在这种情况下，您甚至不需要隐藏输入，只需将数组发送到服务器

于 2012-10-28T12:58:12.180 回答