如何将PHP变量转JS变量并实现对应if/else的JS/jQuery逻辑？

Hey there! Let's get this sorted for you. Below is the complete implementation that converts your PHP variable to JavaScript, then uses either vanilla JS or jQuery to handle the conditional styling based on the URL content.

Full Working Code #

<?php
$url = "web.com";
?>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Include jQuery if you plan to use it -->
<script type="text/javascript">
// Step 1: Convert PHP variable to JavaScript safely
var url = <?php echo json_encode($url); ?>;

// Option 1: Using Vanilla JavaScript
function displayTestMessage() {
    let messageElement = document.createElement('p');
    let boldElement = document.createElement('b');
    
    // Set style based on URL condition
    if (url.includes('com')) {
        boldElement.style.backgroundColor = 'blue';
    } else {
        boldElement.style.backgroundColor = 'yellow';
    }
    boldElement.style.color = 'white';
    boldElement.textContent = 'TEST';
    
    messageElement.appendChild(boldElement);
    // Append to your target element (e.g., body, or a specific div with ID "container")
    document.body.appendChild(messageElement);
}

// Option 2: Using jQuery
$(document).ready(function() {
    let style = url.includes('com') ? 'background-color:blue; color:white;' : 'background-color:yellow; color:white;';
    let testHtml = `<p><b style="${style}">TEST</b></p>`;
    // Append to your target element
    $('body').append(testHtml);
});

// Run the vanilla JS function (if using that option)
displayTestMessage();
</script>

Key Details Explained #

• Safe PHP to JS Conversion: Using json_encode($url) is crucial here—it automatically handles special characters, quotes, and validates the output to be proper JavaScript syntax. This avoids bugs that could happen if you just echoed the raw string.
• Conditional Check: We use url.includes('com') to check if the string contains "com"—this is a clean, modern vanilla JS method. If you need to support older browsers, you can use url.indexOf('com') !== -1 instead.
• Output Methods:
  • Vanilla JS: We build the DOM elements programmatically, which is great for dynamic content manipulation.
  • jQuery: We use string interpolation to create the HTML snippet, then append it to the desired element—this is concise if you're already using jQuery in your project.

Notes #

• Make sure to include the jQuery library if you go with the jQuery option (the <script> tag for jQuery is included in the code above).
• Replace document.body or $('body') with a specific element selector (like $('#your-container-id')) if you want the message to appear in a particular part of your page.

内容的提问来源于stack exchange，提问作者chriss.abdirahin