Question

我有以下HTML代码

<i>0</i>
<i>0</i>
<i>0</i>

<button>Test</button>

HTML标记中的

值会单独更改。什么是Jquery代码来检查所有值是否为0然后更改按钮值＆＃34;测试＆＃34;到＆＃34;测试2＆＃34;

我试过

$(document).click(function(){

if($('i').html()=="0")
{
$('button').html("Test2");
}

});

我的所有代码值仍为0，但我无法看到按钮文字更改

Answer 1

循环浏览每个i元素并检查其内容是否为0，如果是，c == 3（这意味着有3个零）更改button的内容{1}}元素。

var c = 0;
$('i').each(function () {
    if ($(this).html() == '0') {
        c++;
        if (c == 3) {
            $('button').text('Test2');
        }
})

Fiddle

或者你可以试试这个简化的代码：

if ($('i').text() == '000') {
    $('button').text('Text2');
}

Fiddle

Answer 2

实际上，由于表现原因，你不应该通过整个数组您应该使用return false;处理程序内的.each()来阻止第一个非0值出现时的循环。

$(document).click(function(){
    var change = true;
    $('i').each(function() {
        if ($(this).text() != '0') {        
            change = false;
            return false;
        }
    });
    if (change)
        $('button').text('Test2');
});

Answer 3

你只需要：

$('button').on('click', function (e) {
    // preventing the default action of the button:
    e.preventDefault();
    $(this).text(function () {
        // caching the collection of <i> elements:
        var iEls = $('i');
        // comparing the number of <i> elements whose text is '0'
        // against the number of <i> elements, returning a Boolean;
        // if the Boolean is true we return 'text2', if false 'text':
        return iEls.filter(function () {
            return $(this).text().trim() === '0';
        }).length === iEls.length ? 'text2' : 'text';
    });
});

＆＃13;

$('button').on('click', function(e) {
  e.preventDefault();
  $(this).text(function() {
    var iEls = $('i');
    return iEls.filter(function() {
      return $(this).text().trim() === '0';
    }).length === iEls.length ? 'text2' : 'text';
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i>0</i>
<i>0</i>
<i>0</i>

<button>Test</button>

＆＃13;

虽然上面看起来有点麻烦，但它不需要全局或其他外部变量，需要跟踪并避免必须将元素的数量硬编码到比较中。

参考文献：

event.preventDefault() (jQuery implementation)。
filter()。
on()。
text()。

根据Jquery中相同标记的所有值更改按钮文本

3 个答案:

Fiddle

Fiddle