Question

我正在尝试根据另一个元素的内容向特定元素添加HTML类。该元素的数据是动态的。这是我的代码：

<div class="container-fluid">
    <div class="row">
        <div class="task_list col-lg-12 col-sm-12">

            @foreach($tasks as $task)

            <div id="{{ $task->id }}" class="row task_element">

                <p class="task_description">
                    {{ $task->description }}
                </p>

                <p class="task_priority">
                    {{ $task->priority }}
                </p>

            </div>

            @endforeach

        </div>  
    </div>
</div>

<script>

    if ($(".task_priority").text().trim() === "high") {
        $(".task_element").addClass('high');
    } elseif ($(".task_priority").text().trim() === "medium") {
        $(".task_element").addClass('medium');
    } else ($(".task_priority").text().trim() === "low") {
        $(".task_element").addClass('low');

</script>

目前无效。这似乎是一项简单的任务，但我还没有找到解决方法。如何根据“task_priority”的文本值向“task_element”div添加一个类？

Answer 1

将您的js代码包裹在$( document ).ready()

中

来自文档：

$（document）.ready（）只会运行一次页面文档对象模型（DOM）已准备好执行JavaScript代码。

您的代码变为

// A $( document ).ready() block.
$( document ).ready(function() {
    if ($(".task_priority").text().trim() === "high") {
        $(".task_element").addClass('high');
    } elseif ($(".task_priority").text().trim() === "medium") {
        $(".task_element").addClass('medium');
    } else ($(".task_priority").text().trim() === "low") {
        $(".task_element").addClass('low');
});

Answer 2

如果您有3个任务，例如高低中等

$(".task_priority").text().trim()

将返回highlowmedium作为字符串

你的最后一个陈述并不以if开头而且该陈述并未结束。

这应该有效：

$(document).ready(function() {
$('.task_element').each(function(index, element) {
    if ($(element).find(".task_priority").text().trim() === "high") {
        $(element).addClass('high');
    } else if ($(element).find(".task_priority").text().trim() === "medium") {
        $(element).addClass('medium');
    } else if ($(element).find(".task_priority").text().trim() === "low") {
        $(element).addClass('low');
    }
});
});

https://jsfiddle.net/3gfbh0yg/1/

如何根据另一个元素的内容添加HTML类？

2 个答案: