Question

我有一段代码，它在foreach中打印出票证的状态。它有3种不同的状态值：Open，Closed和Overdue。

我想通过动态地将一个类添加到元素标签中来更改每个文本值在打印到视图时的颜色

Overdue -> Red

Open -> Green

Closed -> Blue

EG：值包含在<td><span class="status"> Overdue </span></td>

中

html / php代码：

<table id="responsive-datatables" class="table hidden table-bordered table-striped table-hover dt-responsive non-responsive dataTable no-footer dtr-inline">
    <thead>
        <tr>
            <th class="per5">#</th>
            <th class="per20">Title</th>
            <th class="per20 hidden-xs hidden-sm">Creator</th>
            <th class="per20 hidden-xs hidden-sm">Assignee</th>
            <th class="per10 hidden-xs">Priority</th>
            <th class="per10 hidden-xs">Status</th>
            <th class="per10 hidden-xs">Created</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($results as $tickets) { ?>
            <tr <?=status_class(element('status', $tickets))?>>
                <td><a href="<?=site_url('tickets/profile/id/' . element('ticket_id', $tickets, ''))?>"><?=html_escape(element('ticket_id', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><a href="<?=site_url('tickets/profile/id/' . element('ticket_id', $tickets, ''))?>"><?=html_escape(element('title', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><a href="<?=site_url('user/profile/id/' . element('created_user_id', $tickets, ''))?>"><?=html_escape(element('created_user', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><a href="<?=site_url('user/profile/id/' . element('assigned_user_id', $tickets, ''))?>"><?=html_escape(element('assigned_user', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><span><?=html_escape(element('priority', $tickets))?></span></td>
                <td class="hidden-xs hidden-sm"><span class="status"><?=html_escape(element('status', $tickets))?></span></td>
                <td class="hidden-xs hidden-sm"><span><?=html_escape(element('created', $tickets))?></span></td>
            </tr>
        <?php } ?>
                </tbody>
            </table>

将类添加到元素的jQuery：

if ($("td span").hasClass("status") && $("td span").html("Overdue")) {
    $(".status").addClass("red");
} else if ($("td span").hasClass("status") && $("td span").html("Closed")) {
    $(".status").addClass("lightblue");
} else if ($("td span").hasClass("status") && $("td span").html("Open")) {
    $(".status").addClass("green");
}

目前只为“逾期”状态添加了.red类。是否可以使用数组来查找所有span元素并循环遍历它们并应用每个票证状态所需的必要类？

Answer 1

尝试 :contains() 。然后添加匹配文字类

if ($("td span").hasClass("status") && $("td span").html("Overdue")) {
    $(".status").addClass("red");
} else if ($("td span").hasClass("status") && $("td span").html("Closed")) {
    $(".status").addClass("lightblue");
} else if ($("td span").hasClass("status") && $("td span").html("Open")) {
    $(".status").addClass("green");
}

$('span:contains("Overdue")').addClass('red');
$('span:contains("Open")').addClass('green');
$('span:contains("Closed")').addClass('blue');

.red{color:red;}
.green{color:green;}
.blue{color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="responsive-datatables" class="table hidden table-bordered table-striped table-hover dt-responsive non-responsive dataTable no-footer dtr-inline">
    <thead>
        <tr>
            <th class="per5">#</th>
            <th class="per20">Title</th>
            <th class="per20 hidden-xs hidden-sm">Creator</th>
            <th class="per20 hidden-xs hidden-sm">Assignee</th>
            <th class="per10 hidden-xs">Priority</th>
            <th class="per10 hidden-xs">Status</th>
            <th class="per10 hidden-xs">Created</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($results as $tickets) { ?>
            <tr <?=status_class(element('status', $tickets))?>>
                <td><a href="<?=site_url('tickets/profile/id/' . element('ticket_id', $tickets, ''))?>"><?=html_escape(element('ticket_id', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><a href="<?=site_url('tickets/profile/id/' . element('ticket_id', $tickets, ''))?>"><?=html_escape(element('title', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><a href="<?=site_url('user/profile/id/' . element('created_user_id', $tickets, ''))?>"><?=html_escape(element('created_user', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><a href="<?=site_url('user/profile/id/' . element('assigned_user_id', $tickets, ''))?>"><?=html_escape(element('assigned_user', $tickets))?></a></td>
                <td class="hidden-xs hidden-sm"><span><?=html_escape(element('priority', $tickets))?></span></td>
                <td class="hidden-xs hidden-sm"><span class="status"><?=html_escape(element('status', $tickets))?></span></td>
                <td class="hidden-xs hidden-sm"><span><?=html_escape(element('created', $tickets))?></span></td>
            </tr>
        <?php } ?>
                </tbody>
            </table>

Answer 2

您可以使用.filter()获取元素并对匹配的元素执行所需的操作。

var status = $("td span.status");
status.filter(function(){
    return this.textContent.trim() === 'Overdue'; //Exact match
}).addClass("red");
status.filter(function(){
    return this.textContent.trim() === 'Open'; //Exact match
}).addClass("green");
status.filter(function(){
    return this.textContent.trim() === 'Closed'; //Exact match
}).addClass("blue");

您也可以使用.contains()，但不会产生完全匹配

var status = $("td span.status");
status.filter(":contains('Overdue')").addClass("red");
status.filter(":contains('Open')").addClass("green");
status.filter(":contains('Closed')").addClass("blue");

Answer 3

我会更改以下内容：

如果您在hasClass上使用$("tr td span")，则只返回与tr td span选择器匹配的其中一个元素的评估。你不会遍历每一个。如果你想循环遍历它们，你应该在each的结果上使用map或$("tr td span")等函数，然后检查要满足的条件。
另外，您尝试检查span对象是否包含特定文本，但是$("td span").html("Overdue")您实际上是在DOM对象中插入文本，而不是评估它在该对象中的存在。

＆＃13;

$("td span").each(function(idx, obj) {
  if ($(this).hasClass('status') && $(this).html().toLowerCase() == 'overdue') $(this).addClass('red');
  if ($(this).hasClass('status') && $(this).html().toLowerCase() == 'closed') $(this).addClass('blue');
  if ($(this).hasClass('status') && $(this).html().toLowerCase() == 'open') $(this).addClass('green');
});

＆＃13;

tr td { background:#ACACAC; font-weight:bold;}
.red {color:red;}
.green {color:green}
.blue {color:blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td><span class="status">Overdue</span></td>
    <td><span>Overdue (but no status class)</span></td>
    <td><span class="status">Open</span></td>
    <td><span class="status">Closed</span></td>
  </tr>
</table>

＆＃13;

此外，通过使用带有jQuery的CSS选择器而不是评估JS条件，可以简化代码。

因此，也避免了循环的需要。

＆＃13;

$("td span.status:contains(Overdue)").addClass('red');
$("td span.status:contains(Open)").addClass('green');
$("td span.status:contains(Close)").addClass('blue');

＆＃13;

tr td { background:#ACACAC; font-weight:bold;}
.red {color:red;}
.green {color:green}
.blue {color:blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td><span class="status">Overdue</span></td>
    <td><span>Overdue (but no status class)</span></td>
    <td><span class="status">Open</span></td>
    <td><span class="status">Closed</span></td>
  </tr>
</table>

＆＃13;

使用jQuery更改内部html值的文本颜色

3 个答案: