Question

编辑::我是一个doof。无意中点击了“阻止此页面创建更多提醒”＃39;或者它读取。 Swicthing to console.log（）显示在我的$（＆＃39;路径＆＃39;）范围内。每个（我调用$（this）.attr（＆＃39; name＆＃39;）;生成一个未定义的变量，但是当我们输入调用$（this）.attr（＆＃39; name＆＃39;）的.click的范围时，会产生预期的值。

我试图完成一个处理SVG路径类的脚本。我想在页面加载时向路径添加类，然后通过单击修改它们。 onclick运行正常，但我是一个完整的noob到正确的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和所有。警报之后的一切（＆＃39; pleasegawdwork＆＃39;）就是我遇到的麻烦;我尝试使用较旧的jQuery调用移动它，使用和不使用.load（）将其抛入，我无法弄明白。我认为ajax是声音，它基本上返回true或false。我很困惑为什么没有警报工作，即使它上面的功能工作正常。任何见解和教育将不胜感激。所以，总结一下：

为什么我们不会提醒警报（＆＃39; pleasegawdwork＆＃39;）以及更多信息，为什么看起来无论我怎么样我都无法运行此代码移动它？

Answer 1

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

Answer 2

这结果是sc ope问题，然后是格式化问题。要记住的快速提示：如果您的数据类型是json，那么请确保使用格式正确的json进行响应。

在页面加载时解析SVG路径

2 个答案: