如何根据元素的内容使用 Jquery 更改元素答案

【问题标题】：How do I change an element using Jquery based on what it is如何根据元素的内容使用 Jquery 更改元素
【发布时间】：2013-03-26 15:45:52
【问题描述】：

我有一个简单的跨度，里面有一个数字：

<span id="MessageLabel">@Model.MessageCount</span>

如果值为0，如何隐藏数字，如果值大于0，如何显示数字？

这是我目前所拥有的：

function loadMessageCount() {

    $('#MessageLabel')

        if ($(item.val()) <= 0) {
             $('#MessageLabel').hide();
        } 
}

我可能还需要通过 ajax 执行此操作，因为每次该数字更改时页面都不会加载。是否也可以这样做？

【问题讨论】：

使用span 你必须使用text() 而不是val()
您还可以使用 parseInt() 将 span 元素中的文本转换为整数，以获得更简洁的解决方案。
由于 Diodeus 似乎忽略了您，我在下面的答案底部添加了一种将文本更改为红色的方法。 stackoverflow.com/a/15641428/1317805
谢谢詹姆斯。成功了！

标签： jquery html show-hide

【解决方案1】：

你已经接近了：

function loadMessageCount() {    
    var item = $('#MessageLabel')    
        if (parseInt(item.text()) <= 0) {
             item.hide();
        } 
}

【讨论】：

...和 item 而不是 $(item) 第二次。
这就像一个魅力！如果数字大于 1，如何将文本颜色更改为红色？
创建一个 CSS 类，然后使用 item.addClass('yourname');

【解决方案2】：

您首先要将$('#MessageLabel') 分配给名为item 的变量：

var item = $('#MessageLabel');

spans do not have values。 .val() 用于拉取值。在这里你想使用.text():

...
if (item.text() <= 0) { ... }

不过，您首先要确保这是一个整数，但要使用 parseInt()：

...
if (parseInt(item.text()) <= 0) { ... }

您可能想查看官方 jQuery 教程：http://try.jquery.com :-)

如果数字大于 1，如何将文本颜色更改为红色？

if (parseInt(item.text()) > 1) {
    $(this).css({
        'color': '#f00';
    });
}

【讨论】：

【解决方案3】：

你可以这样做：

if(parseInt($('#MessageLabel').text()) > 0)
{
    $('#MessageLabel').show()
}
else
{
    $('#MessageLabel').hide();
}

【讨论】：