问题定义

Question

问题定义

我需要在网页上添加类似如下的文字：

如果用户在基于 Windows 的系统上运行，我希望他们看到：

在Windows PC上查找文件C：\ Users \ yourname \ dir1 \ dir2 \ filename

如果用户在基于 OS X 的系统上运行，我希望他们看到：

在Macintosh PC上查找文件/ Users / yourname / dir1 / dir2 / filename

如果用户在[任何其他| Linux ]系统上运行，我希望他们看到：

在Linux PC上查找文件/ home / yourname / dir1 / dir2 / filename

研究

我设法创建了三个几乎相同的javascripts，它们部分有效。一个脚本为我提供了osHomeDir，另一个osType的值，另一个给了我osSeparator的值。我的问题是我不知道如何从java脚本和我的网页中一致地获取这些值。我得到的是第一次替换有效，但我不能重复 - 例如，在我的Mac上我看到：

在Macintosh PC上查找文件/ Users / yournamedir1dir2filename 而不是所需的文件： 在Macintosh PC上查找文件/ Users / yourname / dir1 / dir2 / filename

请注意osSeparator的第一次替换是如何工作的。

期望的结果

我希望有人可以告诉我两件事：

如何使脚本更有效 - 三个几乎完全相同脚本肯定可以更改为返回三个值的脚本
能够多次使用结果的能力（正如所发生的那样）在我的例子中）
备注

不要过于担心这个例子 - 我已经简化它以使其可读。我在很多地方遇到同样的问题。我知道我 COULD 解决了这个问题，我在一个脚本中返回了整个句子，但这完全没有理解这一点。

我的代码

<!DOCTYPE html>
<html>
<body>

<p> Look for the file <a id="osHomeDirId"></a><a id="osSeparatorId"></a>yourname<a id="osSeparatorId"></a>dir1<a id="osSeparatorId"></a>dir2<a id="osSeparatorId"></a>filename on your <a id="osTypeId"></a> PC</p>

<script>
var osHomeDir = "/home";
if (window.navigator.platform.indexOf("Win") != -1) osHomeDir="C:&#92Users";
if (window.navigator.platform.indexOf("Mac")!=-1) osHomeDir="/Users";
document.getElementById("osHomeDirId").innerHTML=osHomeDir;
</script>

<script>
var osType = "Linux";
if (window.navigator.platform.indexOf("Win") != -1) osType="Windows";
if (window.navigator.platform.indexOf("Mac")!=-1) osType="Macintosh";
document.getElementById("osTypeId").innerHTML=osType;
</script>

<script>
var osSeparator = "/";
if (window.navigator.platform.indexOf("Win") != -1) osSeparator="&#92";
document.getElementById("osSeparatorId").innerHTML=osSeparator;
</script>


</body>
</html>

Answer 1

您使用document.getElementById（），它只获取具有指定ID的第一个元素。你也不应该多次使用id。你应该把它变成一个类。您需要使用document.getElementsByClassName（）返回一个数组，然后遍历该数组的所有元素并将innerHTML属性设置为osSeparator。

var separators=document.getElementsByClassName("osSeparatorId");
for(var i=0;i<separators.length;i++){
    separators[i].innerHTML=osSeparator;
}

然后您需要将html更改为<a class="osSeparatorId">

Answer 2

工作答案：

我改变了使用函数而不是getElementsByClassName

的方法

我现在可以得到“期望的”结果，但我确信可以在脚本中添加更高的效率，以便最后保存if...if else...if else结构。

这是有效的代码：

<script>
function localised() {
var printItem=arguments[0];
var osHomeDir="/home";
var osSeparator="/";
var osType="Linux";
if (window.navigator.platform.indexOf("Win") != -1) {
  osHomeDir="C:&#92Users";
  osType="Windows";
  osSeparator="&#92"
}
if (window.navigator.platform.indexOf("Mac")!=-1) {
  osHomeDir="/Users";
  osType="Macintosh";
}
if (printItem=="osHomeDir") document.write(osHomeDir);
else if (printItem=="osType") document.write(osType); 
else if (printItem=="osSeparator") document.write(osSeparator);

}
</script>

<p>Look for the file <script>localised("osHomeDir");</script><script>localised("osSeparator");</script>yourname<script>localised("osSeparator");</script>dir1<script>localised("osSeparator");</script>dir2<script>localised("osSeparator");</script>filename on your <script>localised("osType");</script> PC</p>

</body>
</html>

Answer 3

不是答案......还是

显然有人已经得到了@Max Meijer的答案（因为它已被标记），但是当我尝试它时，它仍然无效。 @Max（或其他任何人）我邀请您编辑此答案，直到它确实有效。

记住：所需的输出（例如在OS X上）=＆gt;
在Macintosh PC上查找文件/ Users / yourname / dir1 / dir2 / filename

使用上面的Max代码输出=＆gt;
在Macintosh PC上查找文件/ Usersyournamedir1dir2filename

请注意，在这种情况下，甚至不会显示osSeparatorId的单个实例。

我还有3个单独的脚本可以做同样的工作。

证明我完全按照描述实现了Max的代码：

<!DOCTYPE html>
<html>
<body>

<!--Note that the following line is now using <a class="osSeparatorId"> instead of <a id="osSeparatorId"> --> 

<p> Look for the file <a id="osHomeDirId"></a><a class="osSeparatorId"></a>yourname<a class="osSeparatorId"></a>dir1<a class="osSeparatorId"></a>dir2<a class="osSeparatorId"></a>filename on your <a id="osTypeId"></a> PC</p>

<script>
var osHomeDir = "/home";
if (window.navigator.platform.indexOf("Win") != -1) osHomeDir="C:&#92Users";
if (window.navigator.platform.indexOf("Mac")!=-1) osHomeDir="/Users";
document.getElementById("osHomeDirId").innerHTML=osHomeDir;
</script>

<script>
var osType = "Linux";
if (window.navigator.platform.indexOf("Win") != -1) osType="Windows";
if (window.navigator.platform.indexOf("Mac")!=-1) osType="Macintosh";
document.getElementById("osTypeId").innerHTML=osType;
</script>

<!--Note that the following is cut and pasted from Max's answer-->    
<script>
var separators=document.getElementsByClassName("osSeparatorId");
for(var i=0;i<separators.length;i++){
    separators[i].innerHTML=osSeparator;
}
</script>


</body>
</html>

如何根据操作系统调整html输出？

问题定义

研究

期望的结果

备注

我的代码

3 个答案:

工作答案：

不是答案......还是