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

How do I set the value of a variable using a switch statement with an expression that is a variable set as a dom elements id?

本文关键字：变量 语句 设置 dom id 元素 switch 何使用 表达式      更新时间：2023-09-26

我遇到的问题是，我试图设置一个变量(contentUrl)，我可以用它来指定我的ajax注入dom元素的URL。因此，当我拖放一个项目时，它会通过".load()"方法从另一个页面加载另一个元素。目前，我正试图使用一个开关语句来设置我的contentUrl变量。

另一个争论点是.load()方法，正如jQuery API中指定的那样，要求url是字符串。

我能做些什么来设置我的contentUrl基于CurDragItem的值，然后执行一个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);
                    }
                });
            });

正如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);
                }
            });
        });
...
相关文章：