Question

我遇到的问题是我正在尝试设置一个变量（contentUrl），我可以用它来指定我的ajax注入的dom元素的URL。因此，当我拖放一个项目时，它会通过＆＃34; .load（）＆＃34;从另一个页面加载另一个元素。方法。目前我正在尝试使用switch语句来设置我的contentUrl变量。

另一个争论点是，jQuery API中指定的.load（）方法要求url为字符串。

如何根据CurDragItem的值设置contentUrl，然后执行ajax .load方法从页面返回一个元素，其值为contentUrl？如果使用开关和.load方法无法做到这一点 - 我认为它不是 - 我怎么能实现我刚才所描述的呢？

如果你需要我把它放在小提琴里，请告诉我。我再次使用jQuery UI的dnd小部件来完成这个无意义的事情。

下面是我的代码片段：

$(function() {
                var dragItems = $('.sidebar-listItem');
                var dropArea = $('.drop');
                var sidebarWrap = $('#l-sidebar-wrapper');
                var sidebarList = $("#l-sidebar-list");

                var contentList = $('.main-content-list');


                dragItems.draggable({ 
                    cursor: "move",
                    cursorAt: {top:60, left:45},
                    helper: 'clone',  
                    revert: "invalid",
                    scroll: false,
                    appendTo: 'body'
                        });
                // setter
                dragItems.draggable( "option", "scroll", false );       

                dropArea.droppable({
                    accept: ".sidebar-listItem",
                    activeClass: "dogs",
                    hoverClass: "dogs",
                    drop: function() {
                            //set the curDragItem value to the id of the element that is being dragged
                             var curDragItem = $('.ui-draggable-dragging').attr("id");
                             //initialize the variable with the value of nothing 
                             var contentUrl = "nothing";

                            //use switch statement to check whether curDragItem matches a case and then set value of contentURL
                            switch (curDragItem) {
                            case 'hour24-1':
                            contentUrl = "hour24.html";
                            break;
                            case 'matisyahu':
                            contentUrl = "matisyahu.html";
                            break;
                            case 'dirtyheads':
                            contentUrl = "dirtyHeads.html";
                            break;
                            }
                            //check what the value of contentUrl is
                            console.log(contentUrl);

                        //load the .main-content-list from a page with the url that is the value of contentUrl

                        dropArea.load("value of contentUrl .main-content-list", initDynamicEventHandlers);
                    }
                });
            });

Answer 1

正如dandavis在评论中提到的，如果您需要在应用程序的其他地方使用它，那么您最好的选择可能是对象映射器。

除此之外，你可以像jQuery UI docs中提到的那样为drop函数添加参数，这样你就可以访问丢弃的任何对象。

                var dropArea = $('.drop');
            var sidebarWrap = $('#l-sidebar-wrapper');
            var sidebarList = $("#l-sidebar-list");

            var contentList = $('.main-content-list');
            var mapper = {
              'hour24-1': 'hour24.html',
              'matisyahu': 'matisyahu.html',
              'dirtyheads': 'dirtyHeads.html'
            };


            dragItems.draggable({ 
                cursor: "move",
                cursorAt: {top:60, left:45},
                helper: 'clone',  
                revert: "invalid",
                scroll: false,
                appendTo: 'body'
                    });
            // setter
            dragItems.draggable( "option", "scroll", false );       

            dropArea.droppable({
                accept: ".sidebar-listItem",
                activeClass: "dogs",
                hoverClass: "dogs",
                drop: function(event, ui) {
                        //set the curDragItem value to the id of the element that is being dragged
                         var curDragItem = ui.attr("id"); // Use the passed in parameter
                         //initialize the variable with the value of nothing 
                         var contentUrl = "nothing";

                        //check the value of curDragItem
                        console.log('Drag item: ' + curDragItem);
                        contentUrl = mapper[curDragItem];
                        //check what the value of contentUrl is
                        console.log(contentUrl);

                    //load the .main-content-list from a page with the url that is the value of contentUrl                 
                    dropArea.load(contentUrl + " .main-content-list", initDynamicEventHandlers);
                }
            });
        });

...

如何使用带有表达式的switch语句设置变量的值，该表达式设置为dom元素id？

1 个答案: