Используйте JS внутри PHP, чтобы изменить свойство класса. - PullRequest
Новая
       50

Используйте JS внутри PHP, чтобы изменить свойство класса.

0 голосов
/ 26 мая 2020

У меня в основном форма php с вопросом, управляемым переключателем (rb). Идея состоит в том, что если rb отмечен как «да», то остальная часть вопроса будет отображаться. Чтобы изначально скрыть остальное, я добавил к этому div класс css с opacity: 0; Я использую js, чтобы установить непрозрачность на 1, когда rb отмечен как «да».

Я не знаю 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 (теперь с классом) не меняет раскрытие-когда -активно ... непрозрачность. Мне кажется, это должно работать?

1 Ответ

0 голосов
/ 26 мая 2020

РЕДАКТИРОВАТЬ: вам не нужен JavaSript для отображения или скрытия HTML элементов из php. Это просто вопрос добавления (или не добавления) класса к элементу и скрытия или отображения из таблицы стилей.

Ссылка на объяснение tan о том, как использовать тернарный оператор.

Вот как вы это делаете. 

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

PHP печатает класс только в некоторых элементах HTML, если условия $is_menopausal истинны и из таблицы стилей мы определяем, должен ли этот класс отображаться или нет.

Но если вы настаиваете на использовании 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>
...