基于值添加CSS类实现特定条件下HTML元素隐藏的解决方案咨询

Absolutely! You have a couple of solid options here, depending on your needs:

Option 1: Add a Conditional CSS Class (Keep Div in DOM) #

This approach adds a custom class to the div when the value is 'no', then uses CSS to hide it. It’s perfect if you might need to show the div later with JavaScript, or if you want to keep it in the DOM for other use cases.

Step 1: Modify Your PHP Code to Include the Conditional Class #

Update your PHP to dynamically set the class based on the value:

<?php
$replace = ($get_value == 1) ? 'yes' : 'no';
// Append a 'hidden' class only when the value is 'no'
$divClass = 'check' . ($replace == 'no' ? ' hidden' : '');
?>

Step 2: Update the HTML with the Dynamic Class #

Use the generated class in your div:

<div class="<?php echo $divClass; ?>">feature: <?php echo $replace; ?></div>

Step 3: Add CSS to Hide the Class #

Add this rule to your stylesheet:

.hidden {
    display: none;
}

Option 2: Conditionally Render the Div (Avoid DOM Presence) #

If you don’t need the div to exist in the HTML at all when the value is 'no', use PHP to only output the div when the value is 'yes'. This is more efficient since the element isn’t loaded or parsed by the browser when hidden.

Modified PHP Code (Simple Conditional) #

<?php
if ($get_value == 1) {
    echo '<div class="check">feature: yes</div>';
}
// No else clause means nothing is output when $get_value isn't 1
?>

Concise Ternary Version #

<?php
echo ($get_value == 1) ? '<div class="check">feature: yes</div>' : '';
?>

Which Option Should You Pick? #

• Go with Option 1 if you need the div to stay in the DOM (e.g., for future JavaScript toggling or accessibility-related visibility changes).
• Choose Option 2 for cleaner HTML and better performance when the div doesn’t need to exist in hidden states.

内容的提问来源于stack exchange，提问作者Marcel