Question

第三次是魅力！

这就是我想要实现的目标..

我想使用data.name填充divs ID名称。我希望<div id="date.name"/>在点击时显示，下面是我尝试过的。

  click: function(event, data) {
    $('#clicked-state')
        // .text('You clicked: '+data.name);
        .show($("<div id='" + data.name + "'/>" ));
        // .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

在这种情况下，data.name包含美国所有50个州的缩写。

点击状态后，例如。 'California'data.name将被指定为'CA'。

我想用它来显示id为'CA'的div。

我想用它来显示我内联同名的div。

更新：根据建议，div没有显示状态。

最近的尝试

CSS

<style>
#va { display:none;}
</style>

JS

     click: function(event, data) {
        $('#clicked-state')
            $('#' + data.name).toggle();
      }
});

HTML 的

    <div id="va">
        this is virginia.
    </div>

我正在使用此插件来生成状态data.name generate和map。

http://newsignature.github.io/us-map/

Answer 1

由于HTML页面中的ID是唯一的，您可以直接使用选择器来定位div并显示它。

$('#' + data.name).show();

Code

click: function(event, data) {
        $('#' + data.name).show();
  }

Answer 2

问题是.show不接受任何参数。我不是百分之百确定你要做什么。如果您尝试使用州名显示现有div，则应将其称为

$("#" + data.name).show();

如果您正在尝试创建新div，请在包含div的父级上使用.html（如果不存在，请在其中创建一个）

$("#ParentDiv").html("<div id='" + data.name + "'/>");

Answer 3

某段代码（http://jsfiddle.net/esxe7LmL/）：

<select>
    <option value="state1">State 1</option>
    <option value="state2">State 2</option>
    <option value="state3">State 3</option>
</select>

<div id="state1">state 1</div>
<div id="state2">state 2</div>
<div id="state3">state 3</div>


$("select").on("change", function() {
   var v = $(this).val();
    $("div").hide();
    $("div#" + v).show();
});

div {
    display: none;
}

Answer 4

好的，所以之前的回答误解了这个问题所以这是我的第二次尝试：

// remember to include your us-map.js library


$('.state').hide();

$('#map').usmap({
  // The click action
  click: function(event, data) {
    console.log( data.name );
    $(".state").hide();
    $('#' + data.name).show();    
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>

<div id="map" style="width: 450px; height: 350px;"></div>

<div id="VA" class="state">
  This is Virginia
</div>
<div id="CA" class="state"><!-- make sure your IDs are UPPERCASE -->
  This is California
</div>

显示基于data.name的div

4 个答案: