php - 无法在 jQuery PHP WORDPRESS 中附加 HTML 结构

Question

<script type="text/javascript">
jQuery(function($) {

    $("td").filter(function (){
        return $(this).text() == '<?php echo $eventDate ?>';
    }).css({ 'background-color': 'Green' });


    $("td").filter(function (){
        return $(this).text() == '<?php echo $eventDate ?>';
    }).append("
    <div id="myCard" class="flip-container" >
        <div class="flipper">
            <div class="front">
                <!-- front content -->
                salam
            </div>
            <div class="back">
                <!-- back content -->
                salam
            </div>
        </div>
    </div>");


});
</script>

Answer 1

双引号有问题，需要转义它们或使用单引号来包装html：

$("td").filter(function (){
    return $(this).text() == '<?php echo $eventDate ?>';
}).append('
<div id="myCard" class="flip-container" >
    <div class="flipper">
        <div class="front">
            <!-- front content -->
            salam
        </div>
        <div class="back">
            <!-- back content -->
            salam
        </div>
    </div>
</div>');

此外，您不能在 javascript 中使用多行（上面的示例只是为了说明引号）。

我会在您使用它时在 jquery 中构建 dom，但您也可以转义换行符，然后组合结果将是：

$("td").filter(function (){
    return $(this).text() == '<?php echo $eventDate ?>';
}).append('<div id="myCard" class="flip-container" > \
    <div class="flipper"> \
        <div class="front"> \
            <!-- front content --> \
            salam \
        </div> \
        <div class="back"> \
            <!-- back content --> \
            salam \
        </div> \
    </div> \
</div>');