Fatal编程技术网
  • javascript/
  • Onclick javascript函数不使用'；不要在第一次点击时工作

Onclick javascript函数不使用'；不要在第一次点击时工作

javascript css

Onclick javascript函数不使用'；不要在第一次点击时工作,javascript,css,Javascript,Css,我编写了一段代码，通过单击“p”元素来隐藏/显示div，但在第一次单击时什么也没有发生。 只有在第二次单击时，代码才能按预期工作。 我读过一些类似的问题，我知道这可能是一个风格问题。 所以我试着改变风格（不知道自己在做什么），但我并不幸运 我还有另一个问题：“p”元素有时包含一个输入，我不知道如何将它放在div的右下角，但放在其他元素的下面 <!DOCTYPE html> <html> <head> <style>

我编写了一段代码，通过单击“p”元素来隐藏/显示div，但在第一次单击时什么也没有发生。
只有在第二次单击时，代码才能按预期工作。 我读过一些类似的问题，我知道这可能是一个风格问题。
所以我试着改变风格（不知道自己在做什么），但我并不幸运

我还有另一个问题：“p”元素有时包含一个输入，我不知道如何将它放在div的右下角，但放在其他元素的下面

<!DOCTYPE html>
<html>
    <head>
        <style>
        .Class1 {
            position:relative;
            display: inline-block;
            width: 48%;
            margin: 3px;
            border: 3px solid #CCC;  
        }
        .Class2 {
            position:absolute;
            bottom:0;
            right:0;
            border: 1px solid #CCC;
            margin:1px;
            background: #FFC;
        } 
        .Fields {
            clear: both;
            border: 1px solid #CCC;
            display: inline-block;
            margin:3px;
        }
        .H_p {
            border: 1px solid #CCC;
            display: inline-block;
        }
        .Opt {
            border: 1px solid #CCC;
            display: none;
        }
        </style>
    </head>
    <body>
        <h2>My test</h2>
            <?php 
            $Divs = array('Div1'=>'Class1', 
                'Div2'=>'Class1', 
                'Div3'=>'Class1', 
                'Div4'=>'Class1', 
                'Div5'=>'Class1');
            $AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
            foreach ($Divs as $Name=>$Class){
                echo '
                <div class="'.$Class.'">';
                echo $Name.'<br/>';
                foreach ($AskToShow as $I_Name=>$Id){
                    echo '
                        <label>'.$I_Name.'</label>
                            <input type="text" id="'.$Id.'" class="Fields"/>';
                }
                echo '
                    <p id="Btn_Opt'.$Name.'" class="Class2" >Mostra campi opzionali</p>';
                echo '
                        <div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
                foreach ($AskToShow as $H_Name=>$Id){
                    echo'
                            <p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
                }
                echo '
                        </div>';
                echo '
                </div>';
            }
            ?>
        <script>
    var MyClass = document.getElementsByClassName("Class2");

    var myFunction = function() {
        var SenderId = this.id;
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        var SubSH = document.getElementById(SubId);
        if (SubSH.style.display == 'none'){
            SubSH.style.display = 'inline-block'; 
        }else{
            SubSH.style.display = 'none'; 
        }
    };
    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
        </script>
    </body>
</html>


.1级{
位置：相对位置；
显示：内联块；
宽度：48%；
保证金：3倍；
边框：3px实心#CCC；
}
.2级{
位置：绝对位置；
底部：0；
右：0；
边框：1px实心#CCC；
保证金：1px；
背景：#FFC；
} 
.菲尔德{
明确：两者皆有；
边框：1px实心#CCC；
显示：内联块；
保证金：3倍；
}
胡主席{
边框：1px实心#CCC；
显示：内联块；
}
.选择{
边框：1px实心#CCC；
显示：无；
}
我的测试
var MyClass=document.getElementsByClassName（“Class2”）；
var myFunction=function（）{
var SenderId=this.id；
var SubId=SenderId.substring（SenderId.indexOf（“”“）+1）
var SubSH=document.getElementById（SubId）；
如果（SubSH.style.display=='none'）{
SubSH.style.display='inline block'；
}否则{
SubSH.style.display='none'；
}
};
对于（var i=0；i
请在下面找到工作代码

<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
    position:relative;
    display: inline-block;
    width: 48%;
    margin: 3px;
    border: 3px solid #CCC;  
}
.Class2 {
    position:relative;
    bottom:0;
    right:0;
    border: 1px solid #CCC;
    margin:1px;
    background: #FFC;
    display: inline-block;
    float:right;
} 
.Fields {
    clear: both;
    border: 1px solid #CCC;
    display: inline-block;
    margin:3px;
}
.H_p {
    border: 1px solid #CCC;
    display: inline-block;
}
.Opt {
    border: 1px solid #CCC;
    display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs      = array(
    'Div1' => 'Class1',
    'Div2' => 'Class1',
    'Div3' => 'Class1',
    'Div4' => 'Class1',
    'Div5' => 'Class1'
);
$AskToShow = array(
    "Field1" => "1.1.1",
    "Field2" => "1.2.1",
    "Field3" => "1.3.1"
);
foreach ($Divs as $Name => $Class) {
    echo '
    <div class="' . $Class . '">';
    echo $Name . '<br/>';
    foreach ($AskToShow as $I_Name => $Id) {
        echo '
            <label>' . $I_Name . '</label>
                <input type="text" id="' . $Id . '" class="Fields"/>';
    }

    echo '
            <div id=Opt' . $Name . ' name="Opt' . $Name . '" class="Opt" >';
    foreach ($AskToShow as $H_Name => $Id) {
        echo '
                <p id="H_' . $Id . '" class="H_p">' . $H_Name . '</p>';
    }
    echo '
            </div>';
    echo '
        <div style="clear:both;"></div>';
    echo '
        <p id="Btn_Opt' . $Name . '" class="Class2" >Mostra campi opzionali</p>';
    echo '
    </div>';
}
?>
<script>
    var MyClass = document.getElementsByClassName("Class2");

    var myFunction = function() {
        var SenderId = this.id;
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        var SubSH = document.getElementById(SubId);
        if (window.getComputedStyle(SubSH, null).display == 'none'){
                SubSH.style.display = 'inline-block'; 
        } else {
                SubSH.style.display = 'none'; 
        }
    };
    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
</script>
</body>
</html>


.1级{
位置：相对位置；
显示：内联块；
宽度：48%；
保证金：3倍；
边框：3px实心#CCC；
}
.2级{
位置：相对位置；
底部：0；
右：0；
边框：1px实心#CCC；
保证金：1px；
背景：#FFC；
显示：内联块；
浮动：对；
} 
.菲尔德{
明确：两者皆有；
边框：1px实心#CCC；
显示：内联块；
保证金：3倍；
}
胡主席{
边框：1px实心#CCC；
显示：内联块；
}
.选择{
边框：1px实心#CCC；
显示：无；
}
我的测试
var MyClass=document.getElementsByClassName（“Class2”）；
var myFunction=function（）{
var SenderId=this.id；
var SubId=SenderId.substring（SenderId.indexOf（“”“）+1）
var SubSH=document.getElementById（SubId）；
if（window.getComputedStyle（SubSH，null）.display=='none'）{
SubSH.style.display='inline block'；
}否则{
SubSH.style.display='none'；
}
};
对于（var i=0；i
请在下面找到工作代码

<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
    position:relative;
    display: inline-block;
    width: 48%;
    margin: 3px;
    border: 3px solid #CCC;  
}
.Class2 {
    position:relative;
    bottom:0;
    right:0;
    border: 1px solid #CCC;
    margin:1px;
    background: #FFC;
    display: inline-block;
    float:right;
} 
.Fields {
    clear: both;
    border: 1px solid #CCC;
    display: inline-block;
    margin:3px;
}
.H_p {
    border: 1px solid #CCC;
    display: inline-block;
}
.Opt {
    border: 1px solid #CCC;
    display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs      = array(
    'Div1' => 'Class1',
    'Div2' => 'Class1',
    'Div3' => 'Class1',
    'Div4' => 'Class1',
    'Div5' => 'Class1'
);
$AskToShow = array(
    "Field1" => "1.1.1",
    "Field2" => "1.2.1",
    "Field3" => "1.3.1"
);
foreach ($Divs as $Name => $Class) {
    echo '
    <div class="' . $Class . '">';
    echo $Name . '<br/>';
    foreach ($AskToShow as $I_Name => $Id) {
        echo '
            <label>' . $I_Name . '</label>
                <input type="text" id="' . $Id . '" class="Fields"/>';
    }

    echo '
            <div id=Opt' . $Name . ' name="Opt' . $Name . '" class="Opt" >';
    foreach ($AskToShow as $H_Name => $Id) {
        echo '
                <p id="H_' . $Id . '" class="H_p">' . $H_Name . '</p>';
    }
    echo '
            </div>';
    echo '
        <div style="clear:both;"></div>';
    echo '
        <p id="Btn_Opt' . $Name . '" class="Class2" >Mostra campi opzionali</p>';
    echo '
    </div>';
}
?>
<script>
    var MyClass = document.getElementsByClassName("Class2");

    var myFunction = function() {
        var SenderId = this.id;
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        var SubSH = document.getElementById(SubId);
        if (window.getComputedStyle(SubSH, null).display == 'none'){
                SubSH.style.display = 'inline-block'; 
        } else {
                SubSH.style.display = 'none'; 
        }
    };
    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
</script>
</body>
</html>


.1级{
位置：相对位置；
显示：内联块；
宽度：48%；
保证金：3倍；
边框：3px实心#CCC；
}
.2级{
位置：相对位置；
底部：0；
右：0；
边框：1px实心#CCC；
保证金：1px；
背景：#FFC；
显示：内联块；
浮动：对；
} 
.菲尔德{
明确：两者皆有；
边框：1px实心#CCC；
显示：内联块；
保证金：3倍；
}
胡主席{
边框：1px实心#CCC；
显示：内联块；
}
.选择{
边框：1px实心#CCC；
显示：无；
}
我的测试
var MyClass=document.getElementsByClassName（“Class2”）；
var myFunction=function（）{
var SenderId=this.id；
var SubId=SenderId.substring（SenderId.indexOf（“”“）+1）
var SubSH=document.getElementById（SubId）；
if（window.getComputedStyle（SubSH，null）.display=='none'）{
SubSH.style.display='inline block'；
}否则{
SubSH.style.display='none'；
}
};
对于（var i=0；i
问题是，当您执行
SubSH.style.display
时，您只检查
内联样式
，因此某些内容在
中，但您的样式表中有它，因此此方法无法访问它。试着稍微改变一下你的函数——例如

var myFunction = function() {
    var SenderId = this.id;
    var SubId = SenderId.substring(SenderId.indexOf('_')+1)
    var SubSH = document.getElementById(SubId);
    var style = window.getComputedStyle(SubSH);
    if (style.display == 'none'){
        SubSH.style.display = 'inline-block'; 
    }else{
        SubSH.style.display = 'none'; 
    }
};
使用
window.getComputedStyle（SubSH）
您正在检查样式，它知道您的所有类和CSE

问题是，当您执行
SubSH.style.display
时，您只检查
内联样式
，因此某些内容是在
中的，但您的样式表中有它，因此此方法无法访问它。试着稍微改变一下你的函数——例如

var myFunction = function() {
    var SenderId = this.id;
    var SubId = SenderId.substring(SenderId.indexOf('_')+1)
    var SubSH = document.getElementById(SubId);
    var style = window.getComputedStyle(SubSH);
    if (style.display == 'none'){
        SubSH.style.display = 'inline-block'; 
    }else{
        SubSH.style.display = 'none'; 
    }
};
使用
window.getComputedStyle（SubSH）您正在检查样式，它知道您的所有类和CSSE
此代码在语法上不正确。请不要同时问两个问题，试着在之前清理一下，而不是扔掉没有工作的原始页面。请看。您有一个else语句，但没有匹配的if语句？请丢弃php部分并用该php的输出填充它script@HaukurHaf对不起：剪报mistake@Pratansyah我认为这应该是太多的代码。这段代码在语法上是不正确的。请不要同时问两个问题，试着在之前清理一下，而不是扔掉没有工作的原始页面。请看。您有一个else语句，但没有匹配的if语句？请丢弃php部分并用该php的输出填充它script@HaukurHaf对不起：剪报mistake@Pratansyah我认为这应该是太多的代码，所以有两个问题1。style属性仅提供内联样式。如果您想要css样式+内联样式，那么必须使用window.getComputedStyle（）2。需要移动底部的p标签并更改c