javascript - 访问 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/else 语句每次都运行第一组代码 - 而不是 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，单击后该文本变为 GO。当我再次单击时，console.log 告诉我这个按钮的文本是 GO，但第一个 if 语句仍然运行，就好像它的文本是 TESTLABEL 一样。我做错了什么？

Answer 1

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

其次，在您的 if 语句中，您使用的是 text() 方法的 setter 版本。当该方法返回一个 jQuery 对象时，这将总是等于true。相反，使用 setter/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...
}