如何使用 javascript 函数设置 Html 类？答案

【问题标题】：How to set Html class with a javascript function?如何使用 javascript 函数设置 Html 类？
【发布时间】：2016-02-20 11:27:23
【问题描述】：

我为列表中的每个元素显示 4 个按钮。

我想知道哪个按钮里面有数据，所以我创建了一个 ActionResult，如果包含数据，则返回 true。

[HttpPost]
public ActionResult TieneNotificacion(string Pnombre, string Pcorreo1, string Pprefijo)
{
var lista = agp.CC15_EscalaMandoPorUsuario(Pnombre,Pcorreo1,Pprefijo);
if(lista != null){
 return Json(true);
}
else{
return Json(false);
}
}

在视图中，如果方法返回 false，我想设置按钮类“btn btn-xs”，如果返回 true，则设置“btn btn-xs btn-info”。

$(document).ready(function () {
    function tieneNotificacion(Nombre,Correo1,Prefijo){
        $.ajax({

            type: "POST",

            url: "/CentralSoluciones/TieneNotificacion",

            data: { Pnombre: Nombre, 
                Pcorreo1: Correo1,
                Pprefijo: Prefijo },

            success: function (data) {

                if (data) {
                    return "btn btn-xs btn-info"
                }
                else {
                    return "btn btn-xs"
                }

            }

        });
    }
});

而html标签是这样的：

<a href="@Url.Action("Detalles", new { Pnombre= item.Nombre, Pcorreo1=item.Correo1, Pprefijo=list.Prefijo })"
                     class=tieneNotificacion(@item.Nombre,@item.Correo1,@list.Prefijo)>
                    <span>@list.Prefijo</span>
                </a>

【问题讨论】：

通过javascript函数定义HTML类； javascript 函数通过 Ajax 调用 ActionResult 并定义要设置为按钮的类的类型
换句话说，如果 Url.Action 返回带有数据的视图，我希望看到按钮颜色为蓝色，如果没有数据，则颜色为灰色，对不起我的英语
你会发布你的按钮吗？
是标签不是按钮，对不起

标签： c# ajax model-view-controller razor

【解决方案1】：

您可以在 AJAX 调用中为您的按钮设置类。

假设您有这些按钮

  <input type="button"  />
  <input type="button"  />
  <input type="button"  />

将您的 javascript 更新为

     $(document).ready(function () {
            function tieneNotificacion(Nombre,Correo1,Prefijo){
                $.ajax({

                    type: "POST",

                    url: "/CentralSoluciones/TieneNotificacion",

                    data: { Pnombre: Nombre, 
                        Pcorreo1: Correo1,
                        Pprefijo: Prefijo },

                    success: function (data) {

                        if (data) {

                            $( ":button" ).addClass("btn btn-xs btn-info");
                           //To set a class completely, instead of adding one or removing one. 
//    use this $( ":button" ).attr('class','btn btn-xs btn-info');
                        }
                        else {
                         $( ":button" ).addClass("btn btn-xs");
                          //To set a class completely, instead of adding one or removing one. 
//    use this $( ":button" ).attr('class','btn btn-xs');
                        }

                    }

                });
            }
        });

JSFiddle

【讨论】：

我认为是这样，但每行有 3 个按钮，每个按钮都需要使用一个不同的参数调用相同的 javascript 函数
那么不要使用 ID 使用类选择器。或使用属性选择器
我如何将参数发送到函数？每行有 3 个按钮，每个按钮使用两个相同的参数和一个不同的参数调用函数