После добавления хочу удалить

Question

У меня есть несколько кнопок масштабирования, добавляемых в мой контейнер Map

Я хочу удалить эти кнопки масштабирования, когда используется определенное изображение карты

Код: 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")');

именно то, что у вас есть в вашем коде?Если это так, он ищет изображение по буквальному URL «mapImage», а не по адресу, указанному в переменной mapImage.

Изменение его на $('.MapImage').css('background-image','url('+mapImage+')'); должно помочь.