使用滑块显示/隐藏表格答案

【问题标题】：Show / hide tables using slider使用滑块显示/隐藏表格
【发布时间】：2012-11-30 12:12:11
【问题描述】：

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

<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>

仍然没有隐藏或显示。

【问题讨论】：

标签： javascript html-table slider show-hide

【解决方案1】：

您的 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 而不是类型。

【讨论】：

分号不是强制性的。 Javascript 只要求它区分多个语句，如果它们在同一行。
哦，笨蛋，忽略我刚才说的话-.-我的错。
Cerbrus && mafafu 你们成功了！伙计，我没有意识到我离我有多远。非常感谢你们！！！！

【解决方案2】：

如果你正确地格式化你的代码，你会发现你缺少一个}来关闭function showOrHide(newValue)。

另外，("newValue").value 也不起作用。只需使用newValue：

if(newValue == 1)

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

【讨论】：

很抱歉删除了其他一些不起作用的东西。但是改正错误后就不行了。
我试过 if ($("newValue").value = 1) 但仍然一无所获，我觉得我做这一切都错了。有没有更简单的方法来为滑块的每个值调用函数？
“添加了 jQuery”是什么意思？我将 if 语句更改为 if($("newValue").value == 1)
别管 jQuery 的事了，我的误解。使用这个：if(newValue == 1)。很抱歉造成混乱
另外，请记住，您的代码的最后一位仍有很多 style.display="none";。

【解决方案3】：

试试这个

<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>

【讨论】：