仅当下面的div标签有一些值时显示按钮

Question

我有以下的html代码 - 显示一个按钮，用户点击它 - 它显示 下面的一些文本。

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

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

我尝试以下（添加一个ID =“回答部分”，并插入在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

$('.answer:empty').hide().prev('button').hide(); 

Answer 2

你可以这样说：

$('.show-answer-button')[$('.answer').text() ? "show":"hide"](); 

Answer 3

尝试使用length属性和内容（）一起：

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

jsFiddle example