jquery - 在页面加载时解析 SVG 路径

Question

编辑::我是个傻瓜。不小心点击了“阻止此页面创建更多警报”或其内容。切换到 console.log() 表明，在 $('path').each( 的范围内，我对 $(this).attr('name'); 的调用产生了一个 undefined variable ，但是当我们进入调用 $(this).attr('name'); 的 .click 会产生预期值。

我正在尝试完成一个处理 SVG 路径类的脚本。我想将类添加到页面加载时的路径，然后通过单击修改它们。 onclick 工作正常，但我对正确的 jQuery 结构完全是个菜鸟，而且我的搜索什么也没找到。代码如下:

<script>
        $(document).ready(function() {
            /*
             * Replace all SVG images with inline SVG
             */
                $('img.svg').each(function(){
                    var $img = $(this);
                    var imgID = $img.attr('id');
                    var imgClass = $img.attr('class');
                    var imgURL = $img.attr('src');

                    $.get(imgURL, function(data) {
                        // Get the SVG tag, ignore the rest
                        var $svg = $(data).find('svg');

                        // Add replaced image's ID to the new SVG
                        if(typeof imgID !== 'undefined') {
                            $svg = $svg.attr('id', imgID);
                        }


                         // Add replaced image's classes to the new SVG
                        if(typeof imgClass !== 'undefined') {
                          //detect whether the county is unlocked or not
                          imgClass = imgClass +' replaced-svg';
                        }

                        // Remove any invalid XML tags as per http://validator.w3.org
                        $svg = $svg.removeAttr('xmlns:a');

                        // Replace image with new SVG
                        $img.replaceWith($svg);

                        // Add an handler
                        $('path').each(function() {
                          $(function() {
                            console.log('pleasegawdwork');
                            $(this).load(function(){
                              $.ajax({ url: 'scripts/get_unlocked_counties.php',
                                data: {county: $(this).attr('id')},
                                type: 'post',
                                dataType: 'text',
                                success: function(output) {
                                  if(output.unlocked == 1){
                                    //if it is add the county_unlocked class
                                    console.log('success');
                                    imgClass = imgClass +' county_unlocked replaced-svg';
                                    $svg = $svg.attr('class', imgClass);
                                  }else{
                                    //else just give it the class it already had
                                    console.log('fail');
                                    $svg = $svg.attr('class', imgClass);
                                  }
                                },
                                error: function(output){
                                  console.log(output);
                                }
                              });
                            });
                          });
                          //when you click a county
                          $(this).click(function() {
                            var name =$(this).attr('name');
                            $('.county_selected.county_unlocked').attr('class', 'county_unlocked');
                            $('.county_selected').attr('class', '');
                            if($(this).attr('class') == 'county_unlocked'){
                               $(this).attr('class', 'county_selected county_unlocked');
                            }else{
                              $(this).attr('class', 'county_selected'); 
                            }

                            //Rewrite the quick facts div via an ajax call
                            $.ajax({ url: 'scripts/map_controller.php',
                                   data: {county: name},
                                   type: 'post',
                                   dataType: 'json',
                                   success: function(output) {
                                      //rewrite any county_name divs with the clicked county's name
                                      $(".county_name").html(output.name);
                                      //add the facts list to the quick facts section
                                      $(".population").html(output.population);
                                      $(".county_seat").html(output.county_seat);
                                      $(".commodities").html(output.commodities);
                                      $(".parks_sites").html(output.parks_sites);
                                      $(".fun_facts").html(output.fun_facts);
                                      $(".not_unlocked").html('');
                                      $(".unlock_button").attr('style', 'display:none');
                                      if(output.population == '?'){
                                        $(".not_unlocked").html(output.name+' County is waiting to be unlocked!');
                                        $(".unlock_button").attr('style', 'display:visible');
                                      }
                                    },
                                    error: function(output){
                                      console.log(output);
                                    }
                            });
                          });
                       });
                    });

                });
        });
</script>

此代码获取 SVG 图像并将其解析为路径，然后允许我通过 .click 更改页面上的元素。这部分工作得很好，ajax 等等。警报('pleasegawdwork')之后的所有内容都是我遇到的问题；我尝试过移动它，使用旧的 jQuery 调用，将其放入带有或不带有 .load() 的情况下，我无法弄清楚。我认为 ajax 是健全的，它基本上返回 true 或 false。我最困惑的是为什么没有一个警报起作用，尽管它上面的功能工作正常。任何见解和教育将不胜感激。所以，总结一下:

为什么警报从alert('pleasegawdwork')开始就不起作用，更重要的是，为什么无论我如何移动这段代码，我似乎都无法运行它？

Answer 1

jQuery 的 .load() 的第一个参数应该是一个 URL，但您传递的是一个函数。