仅当以下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

Answer 2

你可以这样做：

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

Answer 3

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