0

我正在尝试根据另一个元素的内容将 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 添加一个类？

4

2 回答 2

0

将您的 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');
});
于 2018-05-18T23:31:49.967 回答
0

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

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

将 highlowmedium 作为字符串返回

您的最后一个 else 语句不以 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/

于 2018-05-18T23:41:55.993 回答