0

我正在开发一个应用程序，您可以在其中显示根特（比利时）的所有纪念碑和地点。主页上有一个全屏地图（使用 jQuery 和 Google Maps API v3 编程），在左侧，有一个可以显示的项目列表。用户可以选择是单独显示该类别，还是将其添加到他们之前单击的类别中。

这就是发生的事情：我加载页面，然后单击一个类别。一切正常。但只有当我单击同一类别中的跨度时。每当我单击另一个类别中的某些内容时，firebug 都会抛出错误：parent is null (or this.parentNode is null)

我最初尝试使用 $(this).parent().html()... 在 jQuery 中执行此操作，但它给了我一个类似的错误：'TypeError: parent.html(...) is undefined'。

这是我的代码...

HTML

<section class="category transport">
     <h1>Transport</h1>
     <ul class="clearfix">
          <li><span class="category_li">Parkings</span></li>
          <li><span class="category_li">Stations</span></li>
     </ul>
</section>

JQUERY（悬停效果） 这是我将“add_on_map”跨度添加到列表项的地方

$('.category ul li').hover(
        //mouse-enter
        function()
        {
            if($(this).children('.add_on_map').length == 0)
            {
                $(this).append(add_marker_sign);
                $('.add_on_map').click(showCategory);
            }
            else
            {
                $(this).children('.add_on_map').show();
            }
        }, 
        //mouse-leave
        function()
        {
            $(this).children('.add_on_map').hide();
        }
    );

JQUERY（点击事件）

function showCategory(e)
{
var parent = null;
parent = this.parentNode;

var add_marker_sign = '<span class="add_on_map plus"> +</span>';
var remove_marker_sign = '<span class="add_on_map minus"> -</span>';

var element;
var to_removed_marker_sign = parent.innerHTML.replace(add_marker_sign, remove_marker_sign);
var to_add_marker_sign = parent.innerHTML.replace(remove_marker_sign, add_marker_sign);

   //User clicks span -> If you click on the word:
   //                    All markers are deleted and the clicked category is added
   //So when the clicked item doesn't have the 'add_on_map' class:
   if(!$(this).hasClass('add_on_map')){
    console.log('remove all markers and add new');
    removeAllMarkers();
    element = $(this).text().toLowerCase();
    $(this).parent().html(to_removed_marker_sign);
    $('.category ul li').removeClass('active_subcategory');
    addMarkers(element);
    $('.category ul li span').click(showCategory);
   }
   //When clicked item DOES have 'add_on_map' class:
   else
   {
    element = $(this).parent().children('.category_li').text().toLowerCase();
    //Check if markers should be ADDED or DELETED
    if($(this).hasClass('plus')) {
        console.log('add markers');
        $(this).parent().html(to_removed_marker_sign);
        addMarkers(element);
        $('.category ul li span').click(showCategory);
    }
    if($(this).hasClass('minus')) {
        console.log('remove markers');
        $(this).parent().html(to_add_marker_sign);
        removeMarkers(element);
        $('.category ul li span').click(showCategory);
    }
   }
 }

我在 jsfiddle 上做了一个小型现场演示！

如果有人可以帮助我解决这个问题，我会很感激！提前致谢。

海伦娜·S。

4

1 回答 1

0

我基于您的 JSFiddle 并得出了该解决方案：http: //jsfiddle.net/98gmn/6/（只有 jQuery 部分已更改）

jQuery

var add_marker_sign = '<span class="add_on_map plus"> +</span>';
var remove_marker_sign = '<span class="add_on_map minus"> -</span>';

$('.category ul li').click(showCategory);

$('.category ul li').hover(
//mouse-enter
function () {
if ($(this).children('.add_on_map').length == 0) {
    $(this).append(add_marker_sign);
} else {
    $(this).children('.add_on_map').show();
}
},
//mouse-leave
function () {
$(this).children('.add_on_map').hide();
});

function showCategory() {
var element;
var $this = $(this);
var $marker = $this.find('span.add_on_map');

element = $(this).text().toLowerCase();
$this.toggleClass('show_on_map');
$marker.toggleClass('plus').toggleClass('minus');

if($marker.hasClass('plus'))
{
    $marker.html(' +');
}
else
{
    $marker.html(' -');
}
}

它简化了 DOM 和事件操作，在要在地图上显示的列表元素上设置类“show_on_map”。

于 2013-04-13T11:03:32.097 回答