在页面加载时通过 SVG 路径解析

Question

编辑:: 我是个笨蛋。不小心点击了“阻止此页面创建更多警报”或它读取的内容。切换到 console.log() 显示在我的 $('path').each( 我对 $(this).attr('name'); 的调用范围内会产生一个未定义的变量，但是当我们进入.click 对 $(this).attr('name'); 的调用会产生预期值。

我正在尝试完成一个处理 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 和所有。 alert('pleasegawdwork') 之后的所有内容都是我遇到的问题；我尝试过移动它，使用较旧的 jQuery 调用，在有和没有 .load() 的情况下将其放入，我无法弄清楚。我认为 ajax 是合理的，它基本上返回 true 或 false。我很困惑为什么没有一个警报起作用，即使它上面的功能工作正常。任何见解和教育将不胜感激。所以，总结一下：

为什么警报不能从 alert('pleasegawdwork') 开始工作，以及为什么无论我如何移动它似乎都无法运行此代码？

Answer 1

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

Answer 2

这原来是一个范围问题，然后是一个格式问题。要记住的快速提示：确保如果您的数据类型是 json，那么您正在使用格式正确的 json 进行响应。