Question

这是我的代码。我正在使用Symfony / Twig来传递变量和翻译字符串（如果有人不确定{{，}}，{% trans %}等是什么的。）

请查看我所拥有glyphicon glyphicon-camera的行 - 我想要的是让用户点击此内容，并在下方直接显示包含row.getPhoto()内容的新行 - 图标仅当row.getPhoto()不为空时才会显示，因此点击它将始终意味着要显示的内容。

同样，再次点击照片图标会使该行消失。

我该怎么做？我不确定我是否应该使用jQuery或Angular（我在项目的其他地方都使用它们，因此两者都很容易为我提供）。欢迎任何评论，谢谢。

    <table class="table">
    <tr>
        <th width="10%">{% trans %} header.item {% endtrans %}</th>
        <th width="60%">{% trans %} header.action {% endtrans %}</th>
        <th width="10%">{% trans %} header.option1 {% endtrans %}</th>
        <th width="10%">{% trans %} header.option2 {% endtrans %}</th>
        <th width="10%">{% trans %} header.option3 {% endtrans %}</th>
    </tr>

    {% for row in showRows(allItems) %}
        <tr>
            <td>
                {{ row.getItem() }}
            </td>

            <td>
                {{ row.getAction() }} {% if row.getPhoto() is not null %} <span class="pull-right show-hide-photo glyphicon glyphicon-camera"></span>{% endif %}
            </td>

            <td>
                {% if row.getOption1() %}<span class="glyphicon glyphicon-ok"></span>{% endif %}
            </td>

            <td>
                {% if row.getOption2() %}<span class="glyphicon glyphicon-ok"></span>{% endif %}
            </td>

            <td>
                {% if row.getOption3() %}<span class="glyphicon glyphicon-ok"></span>{% endif %}
            </td>
        </tr>
    {% endfor %}
    </table>

我现在只有jQuery，这样可以让图标在悬停时显示为链接：

    // Photo button
    $('.show-hide-photo').css('cursor', 'pointer');

Answer 1

你总是可以在javascript代码上传递symphony2变量，所以你可以得到一些类似于以下内容的scirpt：

<scirpt>
$(.glyphicon).click(function(){
     $(.Some-other-class).toggle()
});
</script>

你可以将.Some-other-class div元素或td元素作为隐藏开头，并在其中包含变量（就像你在静态html代码中所做的那样）。

Answer 2

你不需要js中的css指针在css类中使用它来在页面加载时没有用户点击它。

如果您的照片是链接，那么对于您的点击，您可以执行以下操作：

首次使用你的树枝<img src="{{row.photo}}" alt="" style="display:none;"/>，只要你想放置图像。

然后在点击照片按钮中的js内

$('.show-hide-photo').on('click', function(){

   $(this).closest('tr').find('img').toggle();

});

$(this)是您的show-hide-photo按钮，closest('tr')将查找包含您的按钮的标记，然后find('img')将在该情况下找到该行（行）内的标记你不需要打扰id来选择正确的行等。

使用jQuery或Angular动态添加或删除表行？

2 个答案: