在按钮单击、php、phalcon 上显示更多隐藏文本答案

【问题标题】：Display more of a hidden text on button click, php, phalcon在按钮单击、php、phalcon 上显示更多隐藏文本
【发布时间】：2017-11-02 08:31:01
【问题描述】：

我有一个显示数据库项目的表格。其中一项是描述，因此可能很长。我遇到的最大问题是如何在我的控制器类中顺利使用 JS 和 HTML。

如果它超过 100 个字符，我希望能够显示一点点，以及一个看起来像“...”的按钮，如果用户单击它，它会显示修剪后的文本。我想使用 javascript 来执行此操作，这是我尝试过的，这段代码在我的控制器中，所以我只是将这些发送到视图。

问题是当我按下按钮时它不显示任何内容，所以这里出了什么问题？有些人建议使用 jquery，但我不想在别处编写我的 js 脚本并再次调用它，因为我不确定如何在 Phalcon 控制器中执行此操作。

    $this->view->tblColumns = [
            'element one',
            'element two',
            function (tablename $instance) {
                if (strlen($desc = $instance->getDescription()) > 100) {
                    return $shortDesc = substr($instance->getDescription(), 0, 100) . '
<button style="background: none;border: none" onclick="(function(){
    var desc= <?php echo
    $desc; ?>; document.write(desc) ;
})()" >...</button>';

                } else {
                    return $instance->getDescription();
                }
            },

【问题讨论】：

标签： javascript php html phalcon volt

【解决方案1】：

不要在页面加载后使用 document.write。它会擦除页面
您的 desc 需要用单引号括起来并且没有回车符。
您不能在 onclick 中使用 IIFE，除非它返回一个函数
如果您的按钮在表单中，您将提交表单 - 它应该是 type=button

你的意思可能是

<button type="button" onclick="var desc='<?php echo $desc; ?>'; 
document.querySelector('#someContainer').innerHTML=desc;"...>

但更好的方法是切换标签内的现有文本（例如跨度）

【讨论】：

我可以将 $desc 放在一个 html 容器中并在 querySelector 中引用它，你是这个意思吗？我不确定容器应该是什么。
它可能是按钮的父容器 - 您可以用文本替换按钮。这只是一个例子
stackoverflow.com/questions/23923314/…
谢谢你使用 span 标签似乎是一个更好的选择

【解决方案2】：

我找到了一种方法来做我想做的事，使用代码阅读更多内容，从此链接阅读更少内容https://codepen.io/maxds/pen/jgeoA 我在 phalcon MVC 中遇到的问题是我不知道我可以在控制器的视图中使用我的 java 脚本和 css，这就是我所做的。我只是使用该链接中的 js 到我的视图文件中，使用标签和标签的 css 相同。在控制器上的函数中我写了以下`

$this->view->tblColumns = [
            'one',
            'two',
            function(tablename $link){
            $desc=$link->getDescription();
                $html=<<<HTML
             <span span class="more"> $desc</span>
                  HTML;
                return $html;
            }`

【讨论】：