在JS中创建动态变量名称

时间:2018-07-11 03:57:19

标签: javascript jquery

var $geometryPointFields = $('[class*="Point"]', $panel),
    $geometryLineFields = $('[class*="Line"]', $panel),
    $geometryPolygonFields = $('[class*="Polygon"]', $panel);

function(geometry) {
    // geomtery is either Point, Line or Polygon
    ${'geometry'+geometry+'Fields'}.show() // ?
}

我该怎么做?我不能或不想使用window[]scope[]

2 个答案:

答案 0 :(得分:3)

因为这三个变量都是几何字段,所以使用对象而不是三个独立变量可能最有意义:

const geometryFields = {
  Point: $('[class*="Point"]', $panel),
  Line: $('[class*="Line"]', $panel),
  Polygon: $('[class*="Polygon"]', $panel)
};

然后,您可以使用geometry字符串访问对象的属性:

function showGeom(classStr) {
  geometryFields[classStr].show();
}

如果必须使用独立变量,则可以eval,但实际上不应该eval

$geometryPointFields = $('.point');
function showGeom(classStr) {
  eval('$geometry' + classStr + 'Fields').show();
}
setTimeout(() => showGeom('Point'), 1500);
.point { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="point">point</div>

答案 1 :(得分:1)

您的变量是使用jQuery选择器的响应形成的。为什么不直接在函数中选择并显示元素?

function showElements(geometry) {
  $('[class*="' + geometry + '"]', $panel).show();
}

您只需要确保可以使用此功能访问$panel,它就可以正常工作。