如何使用javascript函数设置Html类

本文关键字：Html 设置 函数 何使用 javascript | 更新日期: 2023-09-27 18:22:29

i为列表中的每个元素显示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类

您可以在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

相关文章：