切换<跨度>选择性地

我有一个链接，只有当孩子的类为.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);
    });
});