Question

我正试图通过点击来改变某些div的可见性我在数组上使用php foreach循环添加“main”div和“sub”div 之后，我使用javascript将事件添加到具有特定类的元素。

问题是javascript函数在开头和结尾都有双引号的元素名称。

我可以通过使用“子字符串”来解决，但我对网络编程很新，我需要理解为什么会发生这种情况或者我永远不会提高我的技能。

下面是我的所有代码。

<!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;
} 
.H_p {
    border: 1px solid #CCC;
    display: inline-block;
}
.Opt {
    border: 1px solid #CCC;
    display: none;
}
</style>
</head>
<body>
<?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/>';
    echo '
        <p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</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;
        alert (SenderId);
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        alert (SubId);
        var SubSH = document.getElementById(SubId);
        if (!SubSH){
            alert("Empty"); //This is the alert shown!!
        }else{
            alert(SubSH.name);
        }
        if (SubSH.style.display == 'none'){
            document.getElementById(SubId).style.display = 'block'; 
        }else{
            document.getElementById(SubId).style.display = 'none';
        }
    };

    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
</script>
</body>
</html>

Answer 1

<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';

您正在使用”（右双引号）来界定属性值。只允许"（引号）和'（APOSTROPHE）。

因此，正确的双重报价标记被视为数据，而不是分隔符。

此代码示例以较大的字体大小显示三个字符，以便您可以清楚地看到它们之间的区别。

＆＃13;

body { font-size: 50px; }

＆＃13;

”<br>"<br>'

＆＃13;

这通常是由使用文字处理器而不是文本编辑器编写HTML引起的。

Answer 2

 <p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';

你使用了错误的引用类型”。

希望这可以解决它。

在Html元素名称中获取双引号

2 个答案: