Question

Cakephp的新功能在使用javascript时遇到一些麻烦

Cakephp代码：

<?php
echo "ready!",
$this->Html->image(
'button_on', array(
'style' => 'height: 40px; width: 70px;',
'id' => 'changeimg',
'onclick' => 'changeImage()'
));
?>

<script type="text/javascript">
function changeImage() {
    console.info('success');
    if (document.getElementById("changeimg").src === "/site/img/button_on") {
        console.info('success2');
        document.getElementById("changeimg").src = "/site/img/button_off";
    } else {
        document.getElementById("changeimg").src = "/site/img/button_on";
    }
    return false; 
}
</script>

生成的代码/您在浏览器中看到的代码来源：

ready!<img id="changeimg" alt="" onclick="changeImage()" style="height: 40px; width: 70px;" src="/site/img/button_on">

从理论上讲，当您使用onclick事件更改图像时，图像URL会随着用户单击或触发事件而更改，以进行详细说明。

生成的代码：

ready!<img id="changeimg" alt="" onclick="changeImage()" style="height: 40px; width: 70px;" src="/site/img/button_on">

点击：触发事件：

ready!<img id="changeimg" alt="" onclick="changeImage()" style="height: 40px; width: 70px;" src="/site/img/button_off">

上面的场景应该会发生，但是在我的情况下它不起作用，我怎么能解决这个问题？为什么蛋糕会看到被触发的事件。任何帮助表示赞赏

Answer 1

这很好用，根据要求改变逻辑：

<?php
echo "ready!";
echo $this->Html->image('logo.png', array('style' => 'height: 40px; width: 70px;','id' => 'changeimg','onclick' => 'changeImage()'));

$this->Html->scriptStart(array('inline' => false));
?>
function changeImage() {
    var path = document.getElementById("changeimg").src;
    if (path.search("logo.png")) {
        document.getElementById("changeimg").src = "<?php echo $this->webroot; ?>/img/logo_new.png";
    } else {
    document.getElementById("changeimg").src = "<?php echo $this->webroot; ?>/img/logo_small.png";
    }
    return false; 
}
<?php 
$this->Html->scriptEnd();
?>

Cakephp无法看到javascript事件

1 个答案: