JQuery 三元运算符未以正确的方式执行逻辑

Question

我想要具有基于

isAssigned

变量的 2 种样式的动态渲染按钮：

如果

isAssigned

为 false 我希望按钮看起来像这样

<button class="btn btn-success-outlined" data-action="join">Join</button>

它必须重定向到 Join 控制器方法

如果

isAssigned

为真我希望它看起来像这样

<button class="btn btn-success" data-action="leave">Joined</button>

它必须重定向到离开控制器方法

问题是，无论

isAssigned

值是什么，它都只是得到我的条件运算符的第一个可能的结果，在这种情况下按钮总是这样

<button class="btn btn-success" data-action="leave">Joined</button>

代码：

document.addEventListener("DOMContentLoaded", function () {
    var referenceLinkButton = document.getElementById("referenceLinkButton");
    var referenceLink = referenceLinkButton.dataset.referenceUrl;

    referenceLinkButton.addEventListener("click", function () {
        if (isValidURL(referenceLink)) {
            window.open(referenceLink, "_blank");
        }
    });

    function isValidURL(url) {
        var pattern = /^(https?:\/\/)/i;
        return pattern.test(url);
    }

    // Use the global variables defined in the Razor view
    let data = {
        encodedName: encodedName,
        isAssigned: isAssigned
    };

    const container = $("#buttons")

    function RenderJoinButton(data, container) {
        container.empty();
        const button = data.isAssigned
            ? `<button class="btn btn-success" data-action="leave">Joined</button>`
            : `<button class="btn btn-success-outlined" data-action="join">Join</button>`

        container.append(button);

        container.find('[data-action="join"]').click(function (event) {
            event.preventDefault();
            const encodedName = $(this).data('encodedname');
            navigateToProjectManagerEdit(encodedName);
        });

        container.find('[data-action="leave"]').click(function (event) {
            event.preventDefault();
            const encodedName = $(this).data('encodedname');
            navigateToTaskManagerIndex(encodedName);
        });
    };

    RenderJoinButton(data, container)
});

isAssigned

值分配正确，尝试用

console.log

调试它，而且它没有被其他JS代码覆盖，我不知道它出了什么问题。将其切换为 if else 也没有帮助

这是我的部分观点，供参考

@model TaskManager.Application.Task.TaskDto

...

<div class="card-footer" id="buttons">
       <!-- Js will populate this-->          
</div>

rest of the code...

<script>
    var encodedName = "@Html.Raw(Model.EncodedName)";
    var isAssigned = "@Html.Raw(Model.IsAssigned)";
</script>
<script src="~/js/TaskManager/Details.js"></script>

Answer 1

问题是将变量从我的 razor 视图传递到 JS 代码的方法是错误的

    var isAssigned = "@Html.Raw(Model.IsAssigned)";

通过这种方法，布尔值被分组成字符串，因此它是“true”或“false”（带引号）

要修复它，我必须按如下方式修改此行：

    var isAssigned = @(Model.IsAssigned ? "true" : "false");

通过这种方法，isAssigned 变量仍然是布尔值，并且可以在三元运算符中进行操作