访问HTML标记的不同元素

Question

我有个按钮：

<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" 
data-style="contract" data-size="l">
    <span class="ladda-label">TESTLABEL</span>
</a>

我试图通过IF语句访问其中的文本：TESTLABEL。我可以这样修改文本：

$('#form-submit').text('GO').button("refresh");

但是这个if/ each语句每次运行第一组代码--从来不运行else if部分。

console.log($('#form-submit').text());

if ($('#form-submit').text('TESTLABEL')) {
    $('#form-submit').text('GO').button("refresh");
} 
else if ($('#form-submit').text('GO')) {
    //do other code...
}

当我点击这个按钮时，文本就是TESTLABEL，一旦我点击它，它就会改变。当我再次单击时，console.log告诉我这个按钮的文本是GO，但是第一个if语句仍然运行，就好像它的文本是TESTLABEL一样。我做错什么了？

Answer 1

首先，文本位于span元素内的#form-submit元素中，因此您应该使用$('#form-submit span')或$('#form-submit .ladda-label')来选择它。

其次，在if语句中，您使用的是text()方法的setter版本。这将始终等同于true，因为该方法返回jQuery对象。相反，使用getter。试试这个：

var $button = $('#form-submit')
var $label = $button.find('span');
if ($label.text() == 'TESTLABEL') {
    $label.text('GO');
    $button.button("refresh");
} 
else if ($label.text() == 'GO') {
    //do other code...
}