“永远在线” jquery 命令答案

【问题标题】："Always on " jquery command“永远在线” jquery 命令
【发布时间】：2011-12-06 09:18:04
【问题描述】：

最近我正在做一个项目，在不使用 Flash 的情况下为商场制作交互式目录地图，因为他们需要从移动设备访问。

但我对 jquery 有疑问，我正在使用带有 jquery 地图突出显示的自定义 java 命令。我用它来定位我的地图坐标。

当有人点击地图或下面的列表时调用方法，它会突出显示地图并在右侧显示信息。

我的问题是，当有人从列表或地图中单击另一家商店时，它不会清除上一个突出显示的块并且前一个继续突出显示，无论您点击了多少次。

我需要改进我的代码，这样当有人点击第二个链接时，它会自动清除前一个链接。

任何人都可以在下面的链接下看到我的演示文件 http://www.pad10.com/testsities/directorymap/

如果有人帮助我，我将不胜感激

【问题讨论】：

这与Java无关，只是Javascript
欢迎来到 Stackoverflow .. 这是一个面向程序员的问答网站 - 请花一些时间阅读 FAQs - 包含一些突出问题的代码的问题得到更好的回答

标签： javascript jquery

【解决方案1】：

问题是您在单击另一个区域时没有关闭当前选定区域的突出显示。

放置这个：

$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');

在您的salhia.js 中，在.mapclick 点击处理程序中：

$('.mapclick').click(function(){
    $('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');

    $('.mapclick').removeClass('selected');
    $(this).addClass('selected');

    var shop = '.shopdetails#' + $(this).attr('shop');
    var htmlCode = $(shop).html();

    $('.shopinfo').fadeOut(500, function(){
        $('.shopinfo .shopdetails').html(htmlCode);
        $('.shopinfo').fadeIn(500);
    });
});

【讨论】：

亲爱的 Socha，感谢您的回答，我将您的代码放在 .mapclick 处理程序上但仍然无法正常工作，我是 java 脚本的新手，所以对我来说很简单，如果您可以通过您的编辑复制我的脚本版本，那会很棒。
亲爱的 Socha，再次感谢您的快速回复，但我开始明白我的问题出在哪里，我有一个名为“selected”的类与 mapclick 挂钩，但问题是 hilight 选项来了从“jquery.maphilight.js”文件中，我的 css 不会影响地图上的选择状态，即使在 2 "$('.mapclick').removeClass('选定的'); $(this).addClass('选定的');"我放的 js 代码在这种情况下是没有用的。如果您有任何其他想法，我将不胜感激。
@user1083175 是的，selected 类不会更改 jquery.maphilight.js 放置的高光。不过，您可以在 jquery 选择器中使用它来选择以前点击过的商店，并删除它的“alwaysOn”选项——这就是我的代码所做的。你试过了吗？
亲爱的 Socha，我使用的代码和你给我的一样，但是当我选择第一个然后我选择第二个第一个 1 仍然被选中。当我点击第二个时它没有被删除，如果我把完整的源文件发给你，你能看看这个问题。
@user1083175，我检查了你的演示源，它对我有用。不知道我还能提供什么帮助。

【解决方案2】：

对上一个答案中显示的代码进行了一些更改，使其更通用：

// Init
$('.map').maphilight({
       stroke: false,               
}); 

// Reset all map

$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight'); 

$('area').click(function(){    
    // Reset all areas with class 'selected'
    $('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
    // Remove class selected
    $('area').removeClass('selected');
    // select and highlight this area
    $(this).addClass('selected');
    $(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});

【讨论】：