在 PHP 中使用 JS 更改类属性

Question

我有一个主要是 php 表单，其中有一个单选按钮 (rb) 控制问题。这个想法是，如果 rb 被选中“是”，那么问题的其余部分就会显示出来。为了初始隐藏其余部分，我向该 div 添加了一个 css 类，透明度为：0；当 rb 被选中“是”时，我正在使用 js 将不透明度设置为 1。

我不懂 PHP，所以不出所料，我在语法上苦苦挣扎（我认为）。
现在加载正常，但还没有工作......我需要为此显示整个 div

<div id="menopausal" class = "row">   
    <div class="col-xs-4 col-sm-4 "> 
            <label id="mps" for="mps">Are you menopausal?</label><br />  
            <?php $is_menopausal = (isset($questionnaire['is_menopausal']) && $questionnaire['is_menopausal'] == "1"); ?>
            <label class="radio-wrap"><input id="mpsY" for="mpsY" type="radio" name="is_menopausal" value="1"
                <?php echo $is_menopausal ? " checked " : ""  ?> /> 
                <?php if ($is_menopausal): ?>
                    <script>
                        document.getElementById("menopausal").getElementsByClassName("reveal-when-active").style.opacity = 1.0;
                    </script>
                <?php endif; ?>
                <span>Yes</span>
            </label>&nbsp;/&nbsp;
            <label class="radio-wrap"><input id="mpsN" for="mpsX" type="radio" value="0" name="is_menopausal"
                <?php if (isset($questionnaire['is_menopausal']) && $questionnaire['is_menopausal'] == "0") echo " checked "; ?> /><span>No</span>
            </label>
    </div>                  
    <div class="col-xs-4 col-sm-3  reveal-when-active"> 
            <label>Age of onset:</label>
            <input type="text"  name="age_of_mp_onset" style="width: 50%;"
                value="<?php if (isset($questionnaire['age_of_mp_onset'])) echo $questionnaire['age_of_mp_onset']; ?>"
                class="form-control" />
    </div>
    <div class="col-xs-4 col-sm-3  reveal-when-active"> 
            <label>Date of last period:</label>
            <input type="text" name="date_of_last_period" style="width: 50%;"
                value="<?php if (isset($questionnaire['date_of_last_period'])) echo $questionnaire['date_of_last_period']; ?>"
                class="form-control" />
    </div>
</div>

我的 javascript（现在有类）没有改变显露时活动...不透明度。在我看来它应该可以工作？

Answer 1

编辑：您不需要 JavaSript 来显示或隐藏 php 中的 HTML 元素。只需向元素添加（或不添加）一个类，然后在样式表中隐藏或取消隐藏。

Link to tan explanation on how to use the ternary operator.

这就是你的做法。

<?php
//First we determine the state of the "is_menopausal" condition and, as you'll use it in many places,
//save the state in a variable
$is_menopausal = ( isset( $questionnaire['is_menopausal'] ) && $questionnaire['is_menopausal'] == 1 );
?>


<div id="menopausal" class="row">
    <div class="col-xs-4 col-sm-4 ">
        <label id="mps" for="mps">Are you menopausal?</label><br/>
        <label class="radio-wrap">
            <input id="mpsY" for="mpsY" type="radio" name="is_menopausal" value="1"
                <?php echo $is_menopausal ? " checked " : "" ?> />
            <span>Yes</span>
        </label>&nbsp;&nbsp;
        <label class="radio-wrap">
            <input id="mpsN" for="mpsX" type="radio" value="0" name="is_menopausal"
                <?php echo $is_menopausal ? "" : " checked " ?> />
            <span>No</span>
        </label>
    </div>
    <div class="col-xs-4 col-sm-3  reveal-when-active <?php echo $is_menopausal ? "active" : "" ?>">
        <label>Age of onset:</label>
        <input type="text" name="age_of_mp_onset" style="width: 50%;"
               value="<?php echo isset( $questionnaire['age_of_mp_onset'] ) ? $questionnaire['age_of_mp_onset'] : "" ?>"
               class="form-control"/>
    </div>
    <div class="col-xs-4 col-sm-3  reveal-when-active <?php echo $is_menopausal ? "active" : "" ?>">
        <label>Date of last period:</label>
        <input type="text" name="date_of_last_period" style="width: 50%;"
               value="<?php echo isset( $questionnaire['date_of_last_period'] ) ? $questionnaire['date_of_last_period'] : "" ?>"
               class="form-control"/>
    </div>
</div>

<!-- This should be in a separate css style sheet -->
<style type="text/css">
    .reveal-when-active{
        display: none;
    }
    .reveal-when-active.active {
        display: block;
    }
</style>

如果$is_menopausal 条件为真，PHP 仅在某些 HTML 元素中打印一个类，并且我们从样式表中确定是否显示该类。

但如果你坚持使用 JavaScript，你可以这样做。

<?php
//First you determine the state of the "is_menopausal" condition and, as you'll use it in many places,
//save the state in a variable
$is_menopausal = ( isset( $questionnaire['is_menopausal'] ) && $questionnaire['is_menopausal'] == 1 );
?>


<div id="menopausal" class="row">
    <div class="col-xs-4 col-sm-4 ">
        <label id="mps" for="mps">Are you menopausal?</label><br/>
        <label class="radio-wrap">
            <input id="mpsY" for="mpsY" type="radio" name="is_menopausal" value="1"
                <?php echo $is_menopausal ? " checked " : "" ?> />
            <span>Yes</span>
        </label>&nbsp;&nbsp;
        <label class="radio-wrap">
            <input id="mpsN" for="mpsX" type="radio" value="0" name="is_menopausal"
                <?php echo $is_menopausal ? "" : " checked " ?> />
            <span>No</span>
        </label>
    </div>
    <div class="col-xs-4 col-sm-3  reveal-when-active <?php echo $is_menopausal ? "active" : "" ?>">
        <label>Age of onset:</label>
        <input type="text" name="age_of_mp_onset" style="width: 50%;"
               value="<?php echo isset( $questionnaire['age_of_mp_onset'] ) ? $questionnaire['age_of_mp_onset'] : "" ?>"
               class="form-control"/>
    </div>
    <div class="col-xs-4 col-sm-3  reveal-when-active <?php echo $is_menopausal ? "active" : "" ?>">
        <label>Date of last period:</label>
        <input type="text" name="date_of_last_period" style="width: 50%;"
               value="<?php echo isset( $questionnaire['date_of_last_period'] ) ? $questionnaire['date_of_last_period'] : "" ?>"
               class="form-control"/>
    </div>
</div>

<!-- This should be in a separate css file-->
<style type="text/css" >
    .reveal-when-active{
        display: none;
    }
</style>

<!-- This could be in a separate js file-->
<script type="text/javascript">

    (function(){
        let elements = document.getElementsByClassName('reveal-when-active active');
        for(let element of elements) {
            element.style.display = "block";
        }
    })();

</script>

Javascript 显示属于 reveal-when-active 和 active 类的元素（在这种情况下默认隐藏）。

您应该小心缩进和正确的 HTML 标记打开-关闭。此外，当您可以在 input 标记内使用三元运算符时，您不需要使用完整的条件结构。

我会这样做。你会看到代码更清晰了。

<?php
    $is_menopausal = (isset($questionnaire['is_menopausal']) && $questionnaire['is_menopausal'] == "1");
?>
<label class="radio-wrap" for="mpsY">
    <input id="mpsY"
           type="radio" value="1" name="is_menopausal" <?php echo $is_menopausal ? "checked" : ""  ?> >
    <?php if ($is_menopausal): ?>
        <script>
            document.getElementById("menopausal").style.opacity = 1.0;
        </script>
    <?php endif; ?>
    <span>Yes</span>
</label>