在JavaScript中转义PHP代码 - Escaping PHP code inside JavaScript onmouseover

我很难理解如何在php块内的JavaScript事件中管理单引号和双引号。

这是代码:

<?php
$mainImagePath = '';
$galleryImages = $this->getGalleryImages();
if (count($galleryImages) > 0) {
    $gallery = '<div class="more-views">';
    $gallery .= '<h2>' . $this->__('More Views') . '</h2>';
    $gallery .= '<ul>';
    foreach ($galleryImages as $_image) {
        if ($_image->getFile() == $_product->getData('small_image')) {
            $mainImagePath = $this->getGalleryUrl($_image);
        }
        $gallery .= '<li>'
                 .  '<a href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
                 .  'rel="popupWin:''' . $this->getGalleryUrl($_image) . ''', useZoom: ''cloudZoom'', smallImage: ''' . $this->getCloudImage($this->getProduct(), $_image) .  '''" class="cloud-zoom-gallery" title="' . $this->htmlEscape($_image->getLabel()) . '" onmouseover="$(''image'').src = "'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256).'"; return false;">'
                 .  '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) . '" width="56" height="56" alt="' . $this->htmlEscape($_image->getLabel()) . '" />'
                 .  '</a></li>';
    }
    $gallery .= '</ul></div>'; 
}
?>

问题是onmouseover事件，它有一个.src方法，该方法期望值在双引号内，但是在该字符串内放入双引号会破坏其余的。

我已经试过把需要的值放在一个变量中，并回显变量，但这也不起作用。

如何正确转义引号?

onmouseover="$(''image'').src = "'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256).'"; return false;">

使用单引号

onmouseover="$(''image'').src = '''.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256).'''; return false;">

我建议先写出html/javascript，然后简单地将php变量回显到正确的位置。你不需要做任何转义，这使得代码更容易维护。

您的IDE也将能够正确应用语法高亮

<?php
$mainImagePath = '';
$galleryImages = $this->getGalleryImages();
?>
<?php if(count($galleryImages) > 0) { ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views'); ?></h2>
    <ul>
        <?php foreach ($galleryImages as $_image) { ?>
            <?php 
            if ($_image->getFile() == $_product->getData('small_image')) {
                $mainImagePath = $this->getGalleryUrl($_image);
            }
            ?>
            <li>
                <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="popupWin:'<?php echo $this->getGalleryUrl($_image); ?>', useZoom: 'cloudZoom', smallImage: '<?php echo $this->getCloudImage($this->getProduct(), $_image); ?>'" class="cloud-zoom-gallery" title="<?php echo $this->htmlEscape($_image->getLabel()); ?>" onmouseover="$('image').src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256); ?>"; return false;">
                    <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) ;?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()); ?>">
                </a>
            </li>
        <?php } ?>
    </ul>
</div>