Question

我有一个画布，我可以在画布上添加文本和图像层，在画布下面我有几个文本框，其中显示有关所选图层的信息。我展示的东西是：

Xcoördinate
Ycoördinate
宽度
高度
字体
字体大小
字体颜色
性标题
角度

现在由于图像层没有字体，字体大小和字体颜色，现在它将显示“未定义”。

我正在使用此javascript代码在文本框中显示信息：

document.getElementById('width').value = Math.round(layer.width*100)/100;
document.getElementById('height').value = Math.round(layer.height*100)/100;
document.getElementById('x').value = layer.offsetX;
document.getElementById('y').value = layer.offsetY;
document.getElementById('color').value = layer.fontColor;
document.getElementById('color').style.color=layer.fontColor;
document.getElementById('font').value = layer.fontFamily;
document.getElementById('size').value = layer.fontSize;
document.getElementById('title').value = layer.title;
document.getElementById('angle').value = Math.round(layer.angle*100)/100;

问题：
有什么方法可以隐藏文本框，当它们包含“未定义”这个词时会消失吗？还可以在方框前面隐藏纯文本吗？（字体：，大小：，颜色）

可以在this codepen!

中找到画布的工作版本

Answer 1

您可以创建一个辅助函数来隐藏或显示元素，具体取决于值=== undefined与否：

function setElementValueById(id, value){
    var element = document.getElementById(id);
    if(element != null){
        element.style.display = value !== undefined ? '': 'none';
        element.value = value;
    }
}

// usage 
setElementValueById('font', layer.fontFamily);

编辑：

要隐藏标签，您可以将每个框及其标签分组到一个元素（div）中：

（基于您的codepen示例）

<td>
X:
<input id="x" type="number" onkeypress="return isNumber(event)" size="5">
Y:
<input id="y" type="number" onkeypress="return isNumber(event)" size="5">

变为：

<td>
 <div>X:
      <input id="x" type="number" onkeypress="return isNumber(event)" size="5">
 </div>
 <div>Y:
      <input id="y" type="number" onkeypress="return isNumber(event)" size="5">
 </div>

然后修改函数以显示/隐藏父div：

// Searches for the element with the given id and sets its value.
// If the value is strictly equal to 'undefined',
// the element's parent will be hidden.
function setElementValueById(id, value){
    var element = document.getElementById(id);
    if(element != null){
        element.parentElement.style.display = value !== undefined ? '': 'none';
        element.value = value;
    }
}

// usage 
setElementValueById('font', layer.fontFamily);

Answer 2

这是一个简单的解决方案：

var value = // get the value from layer
if(typeof value === 'undefined') {
    // hide the box
}

由于您似乎没有使用jQuery，因此隐藏输入将更加困难：

document.getElementById(id).style.display = 'none';

并显示：

document.getElementById(id).style.display = 'block';

使用jQuery，你可以这样做：

$(id).show();

分别为：

$(id).hide();

隐藏文本框的值

2 个答案:

编辑：