Question

我有一个链接，只有当孩子有一个.has-comment类时，其标题才能从“添加评论”更改为“编辑评论”。使问题变得复杂的是，我也切换了同样的图标。

因此，如果div.additional-comments具有.has-comment类，那么我希望文本读取“编辑注释”，否则应该读取“添加注释”。

请在此处查看工作代码：JSFiddle

HTML

<table>
    <tr>
        <td>
            <a class="toggle-comments">
                <span class="add-comment" style="display:none;">Add</span>
                <span class="edit-comment">Edit</span> Comments
                <span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: inline-block;"></span>
                <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: none;"></span>
            </a>
            <div class="additional-comments has-comment" style="display:none;">
                <textarea>Comment is here...</textarea>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a class="toggle-comments">
                <span class="add-comment">Add</span>
                <span class="edit-comment" style="display:none;">Edit</span> Comments
                <span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: inline-block;"></span>
                <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: none;"></span>
            </a>
            <div class="additional-comments" style="display:none;">
                <textarea></textarea>
            </div>
        </td>
    </tr>
</table>

脚本

// Toggle Comments
$(document).ready(function() {
    $('.toggle-comments').click(function() {
        $(this).next('.additional-comments').toggle("fast");
        $(this).find('span').fadeToggle(0);
    });
});

Answer 1

我不确定我是否理解你想要达到的目标，所以我更新了你的小提琴，告诉我你的目标是什么：http://jsfiddle.net/benjaminb/mgdaf5ar/3/

我只改变了这个

$(this).find('span.glyphicon').fadeToggle(0);

Answer 2

您可以通过将find更改为

来忽略所有字形

$(this).find('span:not(.glyphicon)')

选择性地切换<spans>

2 个答案: