追加后，想删除答案

【问题标题】：After appending, want to remove追加后，想删除
【发布时间】：2011-09-23 02:05:07
【问题描述】：

我的地图容器中添加了一些缩放按钮

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

代码： 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;
}

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

【问题讨论】：

标签： javascript jquery append

【解决方案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);
    }
  }
}

【讨论】：

不会在 if 语句中说 $MapContainer.remove('.MapZoomInButton'); $MapContainer.remove('.MapZoomOutButton'); 也可以工作吗？
甚至$MapContainer.remove('#mapZoomIn'); $MapContainer.remove('#mapZoomOut'); ?
它会，但现在您的设计更加灵活。您已经创建了一个可以在 Map 对象中以及在 map 对象之外重用的方法。
我明白了！我尝试了我在此处评论的两种方式，以及示例中给出的方式，但它仍然无法正常工作。这一定是我的事情，但你确实回答了我关于删除这些属性的正确方法的基本问题。谢谢！
查看 if 语句。验证您的代码 if($('.MapImage').css('background-image') === "url(../images/mapImages/noZooMap.jpg)"). 中的以下内容是否正确。也许在 if 语句之前提醒 $('.MapImage').css('background-image') 的值。我们应该确保条件符合您的期望。

【解决方案2】：

这条线是：

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

您的代码中到底有什么？如果是这样，它会在文字 URL“mapImage”而不是在 mapImage 变量中指定的位置查找图像。

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

【讨论】：

哎呀，我实际上在真实代码中就是这样，但我已经简化了代码以保护公司代码，在我的编辑中我把那部分弄错了。 :) 我将编辑示例代码