0

我正在尝试使用滑块显示/隐藏表格并同时更改屏幕上的数字，如下所示： 

<input id="scaleSlider" type="range" value="1" min="1"  max="9" step="1" onchange="showValue(this.value), showOrHide(this.value)"/>

<script type="text/javascript">
    function showValue(newValue) {
        document.getElementById("range").innerHTML = newValue;
    }
</script>
<script type="text/javascript">
    function showOrHide(newValue) {
        if (("newValue").value = 1) {
            document.getElementById(guest2).style.display="none";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
        if (("newValue").value = 2) {
            document.getElementById(guest2).style.display="block";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
}

</script>

“范围”设置得很好并显示数字，但我无法让表格切换”

我现在拥有的

<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>
</td>
</table>

<script type="text/javascript">
function showOrHide(newValue){

    if(newValue == 1) {
document.getElementById(guest2).style.display="none";
document.getElementById(guest3).style.display="none";
document.getElementById(guest4).style.display="none";
document.getElementById(guest5).style.display="none";
document.getElementById(guest6).style.display="none";
document.getElementById(guest7).style.display="none";
document.getElementById(guest8).style.display="none";
document.getElementById(guest9).style.display="none";
}
    if(newValue == 2) {
document.getElementById(guest2).style.display="block";
document.getElementById(guest3).style.display="none";
document.getElementById(guest4).style.display="none";
document.getElementById(guest5).style.display="none";
document.getElementById(guest6).style.display="none";
document.getElementById(guest7).style.display="none";
document.getElementById(guest8).style.display="none";
document.getElementById(guest9).style.display="none";
}
}   

</script>

仍然没有隐藏或显示。

4

3 回答 3

0

尝试这个

<input id="scaleSlider" type="range" value="1" min="1"  max="9" step="1" onchange="showOrHide(this.value)"/>

<script type="text/javascript">
    function showOrHide(newValue) {
        var newValue = document.getElementById("range").value;
        if (newValue == 1) {
            document.getElementById(guest2).style.display="none";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
        if (newValue == 2) {
            document.getElementById(guest2).style.display="block";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
}
</script>
于 2012-11-30T12:54:47.220 回答
0

如果你正确地格式化你的代码，你会看到你缺少一个}to close function showOrHide(newValue)。

此外，("newValue").value将无法正常工作。只需使用newValue：

if(newValue == 1)

编辑 另外，您似乎正在使用.value = 2您if的 's，这应该是.value == 2（相同的==1）

于 2012-11-30T12:19:19.200 回答
0

您的 onchange 需要一个分号：onchange="showValue(this.value); showOrHide(this.value);"而不是逗号。您还需要 Cerbrus 提到的支架。也("newValue").value只需要与它newValue进行比较。您将滑块的实际值作为 传递newValue，因此您不需要做任何特殊的事情来引用它。=再一次，Cerbrus 关于需要==测试相等性而不是做作业也是正确的。

所以你最终得到了if (newValue == 1) { ... }你的 if 语句的形式。

此外，document.getElementById(guest2)其余部分需要在表单中，document.getElementById("guest2")因为 guest2 不是您的 javascript 中的变量，而是您的表的 id。这意味着您需要将其作为字符串而不是引用传递。

还document.getElementById("range")需要是document.getElementById("scaleSlider")哪个是id而不是类型。

于 2012-11-30T12:26:21.703 回答