Question

我有一些缩放按钮被添加到我的地图容器

我想在使用特定地图图像时删除这些缩放按钮

代码： JS：

Map = function()
{

//private:
var $MapContainer;

this.initMap = function($container, zoomHidden)
{
    $MapContainer = $container;
    $MapContainer.append("<div class='MapImage'></div>");

    if(!zoomHidden)
    {
        $MapContainer.append("<div id='mapZoomIn' class='MapZoomInButton'>+</div>");
        $MapContainer.append("<div id='mapZoomOut' class='MapZoomOutButton'>-</div>");
    }
}

this.setMapProperties = function(mapImage)
{

    $('.MapImage').css('background-image','url("'+mapImage+'")');

    // Where I want to remove the zoom buttons
    if($('.MapImage').css('background-image') === "../images/mapImages/noZooMap.jpg")
    {
        $('.MapZoomInButton').remove();
        $('.MapZoomOutButton').remove();
    }
}
}

CSS：

.MapImage
{
position:absolute;
height:100%;
width:100%;
top:0;
right:0;
background-image: url("../images/mapImages/GenericMapImage.jpg");
background-repeat:no-repeat;
}

我不确定在我将它们添加到单独的方法后“删除”缩放按钮的正确方法，因为我上面显示的方式不起作用（运行程序时按钮仍然存在）

Answer 1

您可以像这样在Map中创建一个方法，并在想要删除按钮时使用它。

Map = function() {
  var $MapContainer;

  this.initMap = function($container, zoomHidden) {
    $MapContainer = $container;
    $MapContainer.append("<div class='MapImage'></div>");
    if(!zoomHidden) {
      $MapContainer.append("<div id='mapZoomIn' class='MapZoomInButton'>+</div>");
      $MapContainer.append("<div id='mapZoomOut' class='MapZoomOutButton'>-</div>");
    }
  }

  this.removeZoomButtons = function ($container) {
    $container.remove("#mapZoomIn");
    $container.remove("#mapZoomOut");
  }

  this.setMapProperties = function(mapImage) {
    $('.MapImage').css('background-image','url('+mapImage+')');
    // Where I want to remove the zoom buttons
    if($('.MapImage').css('background-image') === "url(../images/mapImages/noZooMap.jpg)") {
        this.removeZoomButtons($MapContainer);
    }
  }
}

Answer 2

这一行：

$('.MapImage').css('background-image','url("mapImage")');

你的代码中究竟是什么？如果是这样，它正在文字网址“mapImage”上查找图片，而不是在mapImage变量中指定的位置。

将其更改为$('.MapImage').css('background-image','url('+mapImage+')');应该可以解决问题。

追加后，想要删除

2 个答案: