javascript - 仅当以下 div 标签具有某些值时才显示按钮

Question

我有以下 html 代码 - 显示一个按钮并且用户单击它 - 它显示 下面是一些文字。

<div>
 <button class="btn-default btn-primary show-answer-button">Show</button>
 <div class="answer"></div>
 </div>

但有时，当用户单击按钮时，没有文本。 (所以它什么也不显示)。 我想仅当“答案”有一些文本时才显示此按钮。如何实现这一目标？

我尝试了以下操作(添加 id='answer-part' 并在 js 文件中插入一行)，但没有成功:

 <div id="answer-part">
 <button class="btn-default btn-primary show-answer-button">Show</button>
 <div class="answer"></div>
 </div>

并将其添加到 .js 文件

$('.answer-part:empty').hide();

Answer 1

尝试同时使用 length 属性和contents():

$('button.btn-default.btn-primary.show-answer-button').click(function () {
    if ($(this).next().contents().length) $(this).next().show()
})

<强> jsFiddle example