Question

我正在使用SVG地图。在地图的每个元素中，我可以悬停以显示工具提示，或者单击以显示完整的弹出窗口。

如果显示弹出窗口，我想阻止悬停时的工具提示。目前，单击a也会指定一个“已选中”类。我想在rect上检查是否存在“selected”，如果没有找到，则显示工具提示。

以下是我想用来做的代码：

Map.init = function() {

jQuery.get('resources.json', function(resources) {
    Map.resources = resources;
    $('#map').load('map.svg', function() {
        $('svg').svg();
        var svg = $('svg').svg('get');
        if (!$('rect').hasClass("selected")) {
            $('rect').hover(Map.tooltip);
        }
        $('rect').click(Map.popup);
        $('#map').click(Map.popdown);
    });
});
};

以下是上述功能：

Map = {};

Map.popup = function(e) {
    var rect = $(this);

    /* Get position and dimensions */
    var offset = $(this).offset();
    var rectWidth = $(this)[0].getBoundingClientRect().width;
    var rectHeight = $(this)[0].getBoundingClientRect().height;

    /* Position popover */
    var centerX = offset.left + rectWidth/2 - 250;
    var centerY = offset.top + rectHeight/2;

    $('.popup').css({
        'top' : centerY,
        'left' : centerX,
    });

    /* Hide tooltip that pops up on hover */
    $('.tooltip').hide();

    /* Assign JSON data and show */
    var resource = Map.resources[rect.attr('id')];

    $('.selected').attr('class', '');
    rect.attr('class', 'selected');

    $('.resourceName').html(resource.resourceName).attr('href', resource.resourceUrl);
    $('.popup-header').css('background-image', 'url("'+resource.imageUrl+'")');
    $('.resourceDescription').html(resource.resourceDescription);

    $('.orgName a').attr('href', resource.orgUrl);
    $('.orgName a').html(resource.orgName);
    $('.orgDescription').html(resource.orgDescription);

    $('.activityType').html(resource.locationType);
    $('.activityInterval').html(resource.instanceType);
    $('.activityExperience').html(resource.difficultyLevel);
    $('.activityAgeStart').html(resource.ageRangeStart);
    $('.activityAgeEnd').html(resource.ageRangeEnd);

    $('.cta a').attr('href', resource.resourceUrl);

    $('.popup').show();
    e.stopPropagation();
};

Map.popdown = function() {
    $('.popup').hide();
    rect.attr('class', '');
};

Map.tooltip = function(e) {
    var rect = $(this);

    /* Get position and dimensions */
    var offset = $(this).offset();
    var rectWidth = $(this)[0].getBoundingClientRect().width;
    var rectHeight = $(this)[0].getBoundingClientRect().height;

    /* Position Tooltip */
    var centerX = offset.left + rectWidth/2;
    var centerY = offset.top + rectHeight/2;

    $('.tooltip').css({
        'top' : centerY,
        'left' : centerX,
    });

    /* Assign JSON data and show*/
    var resource = Map.resources[rect.attr('id')];

    $('.tooltipResourceName').html(resource.resourceName).attr('href', resource.resourceUrl);
    $('.tooltip').show();
    e.stopPropagation();
};

我认为.load（）用于加载地图是一个问题，但到目前为止我一直无法诊断。有没有办法在.load（）中检查基于类的条件？

Answer 1

你需要循环遍历元素，而不是一次对它们进行操作。

public Employee GetDepartment(string department)
{
    return GetTheValue(department);
}

或者您可以在选择器中匹配该类：

$('rect').each(function() {
    if (!$(this).hasClass("selected")) {
        $(this).hover(Map.tooltip);
    }
});

请注意，这不是动态的 - 如果课程发生变化，工具提示就不会跟随它。对于动态绑定，请使用委托：

$('rect:not(.selected)').hover(Map.tooltip);

在jQuery中，检查.load（）中的类

1 个答案: