0

我有一张通过 D3 生成的美国县地图。绑定到每个县的事件之一是单击事件，该事件呈现带有三个按钮的工具提示叠加层。我想要做的是根据单击选择的颜色禁用其中一个按钮。

目前，如果我单步执行 Firebug 中的单击处理程序，则会禁用相应的按钮，但如果没有启用断点，则无论如何都会启用所有按钮。

我有一个模块变量thisObj部分由

thisObj : {
  ...
  _fillColors : { 
    market : "#0000ff",
    prospect : "#ff0000",
    neutral : "#c0c0c0",
    hover : "#4CD550" 
  },
  ...
}

我有一个 HTML 模板设置为模块变量

thisObj._tooltip.template = "<div id = 'tooltip_template'>" + 
            "<div class = 'county_data'></div>" +
            "<img src = '/static/images/delete.png' width = '28' height = '28' class = 'delete_logo' id = 'close_tooltip' />" +
            "<div id = 'no_client_message'></div>" +
            "<button id = 'add_prospective_market' class = 'tooltip_button'>Prospective Market</button>" +
            "<button id = 'add_market' class = 'tooltip_button'>Market County</button>" +
            "<button id = 'remove_market' class = 'tooltip_button'>Remove Market</button></div>";

在点击处理程序中，我生成工具提示 DOM 元素并绑定 jQuery UI 按钮覆盖

//add tooltip HTML and styles to this element
thisObj._tooltip.tooltip.html(thisObj._tooltip.template)
  .style("left", (d3.event.pageX + 10) + "px")
  .style("top", (d3.event.pageY - 50) + "px")
  .style("pointer-events" , "auto")
  .style("width", "400px")
  .style("height", "150px");

//get county name and state for future use
thisObj._currentCounty.name = d.name + ", " + d.properties.StateCode

//add in county name and state text
$(".county_data").text(thisObj._currentCounty.name);

//generate jQuery UI button overlays for the tooltip buttons, 
//and enable or disable as eccessary
$(".tooltip_button").button();

然后我检查是否已进行下拉选择。如果没有，则所有按钮都被禁用。否则，使用 rgb2hex 函数将背景颜色转换为十六进制并进行比较

if (thisObj._currentClient.id == null) {
  $("#no_client_message").text("No client has been selected");
  $(".tooltip_button").button("disable");
}

else {
  var countyFillColor = rgb2hex($("#" + d.id).css("fill"));

  if (countyFillColor == thisObj._fillColors.market)
    $("#add_market").button("disable");

  if (countyFillColor == thisObj._fillColors.prospect)
    $("#add_prospective_market").button("disable");
}

//fade tooltip into view
thisObj._tooltip.tooltip
  .transition()
  .duration(800)
  .style("opacity", 1);

我的问题是条件的第一部分通过禁用所有按钮来根据需要工作，但选择性禁用在 Firebug 中单步执行之外不起作用。一次又一次，当我单击一个红色元素时，add_prospective_market在手动单击 Firebug 中的行后，我看到按钮被禁用，但删除断点会导致所有按钮都启用。

4

0 回答 0