在JavaScript onmouseover中转义PHP代码

时间:2013-05-30 09:55:18

标签: php javascript html

我很难理解如何在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方法,希望该值在双引号内,但在该字符串中加入双引号会打破其余部分。

我已经尝试将所需的值放在变量中并回显变量,但这也不起作用。

如何正确地逃避那里的引用?

2 个答案:

答案 0 :(得分:4)

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;">

答案 1 :(得分:1)

我建议先写出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>