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

Question

我遇到的问题是我试图设置一个变量（contentUrl），我可以使用该变量来为我的Ajax注入dom元素指定URL。 因此，当我拖放项目时，它会通过“ .load（）”方法从其他页面加载另一个元素。 目前，我正在尝试使用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文档中的说明将参数添加到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);
                }
            });
        });

...