Fatal编程技术网

Javascript Java脚本隐藏函数

javascript html

Javascript Java脚本隐藏函数,javascript,html,Javascript,Html,大家好 我正在做一个有趣的小项目，对我来说，教我自己JavaScript，并表达我对老式低俗科幻电影《神的村庄》的热爱！，狼蛛，50英尺高女人的袭击，难以置信的萎缩男人，奇妙的航行，八条腿的怪物。我想制作一个程序，让你输入一些基本的统计数据，然后点击一个按钮，显示出理论上说的人在这个尺度上的比例 也就是说，我仍然在模拟这个项目，并希望获得一些基本的功能。我想加入一个选项，在单选按钮上切换文本/选择字段可以是可见的，也可以是不可见的。我完全搞不懂如何在单选按钮上隐藏字段。我知道我需要头中的Java

大家好

我正在做一个有趣的小项目，对我来说，教我自己JavaScript，并表达我对老式低俗科幻电影《神的村庄》的热爱！，狼蛛，50英尺高女人的袭击，难以置信的萎缩男人，奇妙的航行，八条腿的怪物。我想制作一个程序，让你输入一些基本的统计数据，然后点击一个按钮，显示出理论上说的人在这个尺度上的比例

也就是说，我仍然在模拟这个项目，并希望获得一些基本的功能。我想加入一个选项，在单选按钮上切换文本/选择字段可以是可见的，也可以是不可见的。我完全搞不懂如何在单选按钮上隐藏字段。我知道我需要头中的JavaScript来管理隐藏字段的函数。我也在玩弄整张桌子上的一行消失，然后根据需要重新出现

我已经看过了。我知道标题在做什么，但我不知道如何在我的部分中实现它，在这个实际案例中是头发。是否有更好的方法尝试为首次编码者隐藏值？并提前感谢您提供的一切帮助

-编辑- 感谢大家的帮助，我无法在工作中编辑代码，我已经用我使用的解决方案进行了更新，以便将Div包含在代码中。很抱歉早些时候忘了这些

<html>
<head>
    <title>Size Converter</title>
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id); //get the element based on it's id

//if the element exists then set it's visiblity
if (isElement(o)) {
    o.style.visibility = visible ? 'visible' : 'hidden';
} else {
    alert("Element with id '" + id + "' not found.");
}
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (isElement(o)) {
    o.style.display = visible ? 'block' : 'none';
} else {
    alert("Element with id '" + id + "' not found.");
}
}
function isElement(obj) {
var returnValue = false;
if (obj == undefined || obj == null) {
    returnValue = false;
} else {
    returnValue = true;
}
return returnValue;
}
</script>
</head>
<style>
BODY {
background-color: #dbdbdb;
}
#Subject, #CG {
border: solid 1px #000000;
padding: 2px;
}
</style>
<br>
<h1><center>Pre Transformation</center></h1>
<center><form>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
    <tr>
        <td style="width:50%">
            <h3>
                Subject</h3>
        </td>
        <td>
            &nbsp;</td>
        <td style="width:50%">
            <h3>
                Control Group</h3>
        </td>
    </tr>
    <tr>
        <td>
        <div>
        Sex: <input type='radio' name='subjectsex' value='male' onclick="setVisible('Subject', false);" />Male
             <input type='radio' name='subjectsex' value='female' onclick="setVisible('Subject', true);" />Female
        </div></td>
        <td>
            &nbsp;</td>
        <td>
            <div>
        Sex: <input type='radio' name='CGsex' value='male' onclick="setVisible('CG', false);" />Male
             <input type='radio' name='CGsex' value='female' onclick="setVisible('CG', true);" />Female
        </div></td>
    </tr>
    <tr>
        <td>
            Height:&nbsp;<input size="2" value="5" type="text" />&nbsp;Feet&nbsp;<input size="2" value="6" type="text" />Inches</td>
        <td>
            &nbsp;</td>
        <td>
            Height:&nbsp;<input size="2" value="5" type="text" />&nbsp;Feet&nbsp;<input size="2" value="6" type="text" />Inches</td>
    </tr>
    <tr>
        <td>
            Weight:&nbsp;<input size="2" value="130" type="text" />&nbsp;pounds</td>
        <td>
            &nbsp;</td>
        <td>
            Weight:&nbsp;<input size="2" value="130" type="text" />&nbsp;pounds</td>
    </tr>
    <tr>
        <td>
            Measurements:&nbsp;<input size="2" type="text" />&nbsp;bust/chest&nbsp;<input size="2" type="text" />&nbsp;hips&nbsp;<input size="2" type="text" />waist</td>
        <td>
            &nbsp;</td>
        <td>
            Measurements:&nbsp;<input size="2" type="text" />&nbsp;bust/chest&nbsp;<input size="2" type="text" />&nbsp;hips&nbsp;<input size="2" type="text" />waist</td>
    </tr>
    <tr>
        <td> <div id="Subject">
            Hair Length:&nbsp;<select name="hair">
            <option value=".5">Short/Pixie</option>
            <option value="1.0">Medium/Shoulder</option>
            <option value="1.5"selected="selected">Mid Back</option>
            <option value="2.0" >Waist Length</option></select></div></td>
        <td>
            &nbsp;</td>
        <td><div id="CG">
            Hair Length:&nbsp;<select name="hair">
            <option value=".5">Short/Pixie</option>
            <option value="1.0">Medium/Shoulder</option>
            <option value="1.5"selected="selected">Mid Back</option>
            <option value="2.0" >Waist Length</option></select></div></td>
    </tr>
    <tr>
        <td>
            Leg Percent:&nbsp;<input size="2" type="text" /></td>
        <td>
            &nbsp;</td>
        <td>
            Leg Percent:&nbsp;<input size="2" type="text" /></td>
    </tr>
</tbody>
</table>
<hr>
<p style="text-align: center;">
<input size="2" type="text" />Feet&nbsp;<input size="2" type="text" />&nbsp;inches</p>
<p style="text-align: center;">
<input type="button" value="Transform!" /></p>

<hr>
<h1><center>Post Transformation</center></h1>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
    <tr>
<td style="width:50%">
            <h3>
                Subject</h3>
        </td>
        <td>
            &nbsp;</td>
        <td style="width:50%">
            <h3>
                Control Group</h3>
        </td>
    </tr>
    <tr>
        <td>
            </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
</td>
        <td>
            &nbsp;</td>
        <td>
</td>
    </tr>
</tbody>
</table>
</body>
</html>
最好的做法是jqueryonchange函数，您可以监听更改事件并查看是否选中复选框以根据响应执行操作

$(".checkbox").change(function() {
    if(this.checked) {
        $("#myelement").fadeIn();
    } else {
        $("#myelement").fadeOut();
    }
});
除了这个主要错误之外，它几乎可以正常工作：没有要显示的Div1和Div2。 看这里

刚刚加上

   <div id="Div1">This is div 1 </div>
    <div id="Div2">This is div 2 </div>
对于您的代码

有几件事，首先我清理了一下您的JS，并将您的空检查封装在一个方法中。我还添加了缺失的标记元素，我认为这些元素在操作中意外地被省略了

这是一把小提琴：

JavaScript现在如下所示：

function setVisible(id, visible) {
    var o = document.getElementById(id); //get the element based on it's id

    //if the element exists then set it's visiblity
    if (isElement(o)) {
        o.style.visibility = visible ? 'visible' : 'hidden';
    } else {
        alert("Element with id '" + id + "' not found.");
    }
}

function setDisplay(id, visible) {
    var o = document.getElementById(id);
    if (isElement(o)) {
        o.style.display = visible ? 'block' : 'none';
    } else {
        alert("Element with id '" + id + "' not found.");
    }
}

function isElement(obj) {
    var returnValue = false;
    if (obj == undefined || obj == null) {
        returnValue = false;
    } else {
        returnValue = true;
    }
    return returnValue;
}
事件如果您想要无库，有很多方法可以做到这一点，假设您确实在某处有ID为Div1和Div2的元素

这里有一个。它演示了一种比getElementByID更好的查找DOM元素的方法：

var subMale   = document.querySelector('input[name=subjectsex][value=male]'),
    subFemale = document.querySelector('input[name=subjectsex][value=female]'),
    cgMale    = document.querySelector('input[name=CGsex][value=male]'),
    chFemale  = document.querySelector('input[name=CGsex][value=female]'),
    maleDivChange = function() {
        setVisible('Div1', true); 
        setVisible('Div2', false);
    },
    femaleDivChange = function() {
        setVisible('Div1', false); 
        setVisible('Div2', true);
    };

subMale.addEventListener('click', maleDivChange);
subFemale.addEventListener('click', femaleDivChange);
cgMale.addEventListener('click', maleDivChange);
chFemale.addEventListener('click', femaleDivChange);
这将适用于现代浏览器，包括IE9。如果你想早点走，还有一些额外的工作要做

它存在很多问题，例如，如果受试者和对照组之间实际上共享了Div1和Div2，则单击受试者男性、CG女性，然后再次单击受试者男性，将使Div1可见，Div2不可见。此外，这是一种相当野蛮的力量，不可扩展。如果这是我实际正在做的事情，我可能会通过在Div1和Div2元素中添加和删除CSS类来改变可见性，我可能会在每个查找中使用其他CSS类进行标记，如果我找到任何其他性别链接字段，这也会使解决方案可扩展

下面是一个包含上述代码的示例。

OP没有指定JQuery。我也不会说使用JQuery一定是一种最佳实践。在包含的标记中，没有任何id为Div1或Div2的元素。这些存在于何处？抱歉xDaevax，我想我已经将该部分注释掉了。看起来我把它删除了。DIV应该是Hair Select语句所在的位置。我想在我走得更远之前停下来想一想。谢谢你，戴瓦克斯。以你为例，我意识到我做错了什么。我很感谢你清理代码，它应该可以帮助我进行未来的JavaScript编码。我想把它保存在内部，所以我把它嵌入了一个单独的.HTML文件中。我可能主要是在记事本++中编写代码，并在IE8上进行测试，当我在工作中或在家中使用Chrome时，因为这些是我在工作环境中传统使用的浏览器。