Javascript 检索按钮值问题Jquery

我尝试在点击后更改按钮值，因为当其值为“Modificar（Modify）”时，我想更改为“Guardar（Save）”，反之亦然，但由于某些原因，更改按钮值不起作用，我尝试了attr（“value”）、“…”、val（“…”）和prop，但它不起作用，并且使用html（“…”）或文本（“…”）它会删除我在上面的图标

<?php 
require ('../conexion.php');

//Conectar con la base de datos y servidor
$conexion = new Conexion();
$conexion->conectar();

$idCentro = $_POST["idCentro"];

if ($idCentro != "" ){
    $query = "SELECT * FROM centro WHERE id_centro='".$idCentro."'";
    $consult = pg_query($query);    
}

$query2 = "SELECT * FROM parroquia";
$consult2 = pg_query($query2);


if($consult){
    $row = pg_fetch_array($consult);
    ?>
    <form name="registrarCentro" id="registrarCentro" class="registroCentro" method="post" action="">
        <div class="col-lg-4">
            <label> Nombre del Centro</label>
            <input class="form-control" size="70" id="nombre" name="nombre" value=<?php echo "'".$row["nombre"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Dirección</label>
            <input class="form-control" size="70" required:"required" id="direccion" name="direccion" value=<?php echo "'".$row["direccion"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Tel&eacute;fono Principal</label>
            <input class="form-control" size="20" required:"required" id="telefono1" name="telefono1" value=<?php echo "'".$row["telefono_1"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Tel&eacute;fono  Opcional</label>
            <input class="form-control" size="20" required:"required" id="telefono2" name="telefono2" value=<?php echo "'".$row["telefono_2"]."'"; ?> readonly="readonly">
            <br/>
        </div>
        <div class="col-lg-4">
            <label> Parroquia </label>
            <select class="form-control" id="parroquia" readonly="readonly">
            <?php 
                while($row2 = pg_fetch_array($consult2)){ 
                    if($row2["id_parroquia"] == $row["fk_parroquia"]){ ?>
                        <option value=<?php echo "'".$row2["id_parroquia"]."'";?> selected><?php echo $row2["nombre"];?> </option> <?php
                    }else{ ?> 
                        <option value=<?php echo "'".$row2["id_parroquia"]."'";?>><?php echo $row2["nombre"];?></option> <?php
                    }
                }?>
            </select>
            <br/>
        </div>
        <div class="col-lg-12" align="center" >
            <button type="button" class="btn btn-default" style="background-color:#CCC" id="guardar" value="Modificar">
            <img src="img/import.ico" height="25" width="25"\> Modificar </button>
            <br/>
            <br/>
        </div>
        <div class="col-lg-12" align="center" >
            <button type="button" class="btn btn-default" style="background-color:#CCC" id="eliminar" value="Eliminar">
            <img src="img/export.ico" height="25" width="25"\> Eliminar </button>
            <br/>
            <br/>
        </div>
        <div id="errorSection">
        </div>
    </form>
<?php
}
?>
<script type="text/javascript">
function IngresarDatos(){
         $("#registrarCentro").find(':input').each(function() {
                 var elemento= $(this).val();
                 if(elemento == ""){
                    alert("   Todos los Campos son Obligatorios \n \n    Por Favor, Ingrese El campo " + $(this).attr("id"));
                    return false;
                }else{
                    var expRegCedula = new RegExp("^\\d{6,8}$");
                    var expRegNombreApellido = new RegExp("^([a-z]|[A-Z]){5,45}$");
                    var expRegCorreo = new RegExp("^([A-Z]|[a-z])([A-Z]|[a-z]|\_|\-|\.|[0-9]){4,20}\@([A-Z]|[a-z]){3,15}\.([A-Z]|[a-z]){2,5}$");
                    var expRegTelefono = new RegExp("^\\d{10,15}$");
                    var expRegUsuario = new RegExp("^([a-z]|[A-Z]|\\d)+$");

                    if(!expRegNombreApellido.test($("#nombre").val().trim())){
                        alert("El nombro solo puede tener letras con un minimo de 5 y un maximo de 45");
                        return false;
                    }else if((!expRegTelefono.test($("#telefono1").val().trim())) || (!expRegTelefono.test($("#telefono2").val().trim())) ){
                        alert("El campo telefonico solo recibe digitos y con un maximo de 15");
                        return  false;
                    }else{

                        return true;
                    }
                }
             });
        return true;
    }


    $("#guardar").click(function(){
        //alert("Entro a modificar");
        if($(this).val() == "Modificar"){
            $("#guardar").prop("value","Guardar");
            $("#registrarCentro *").each(function(){
                $(this).attr('readonly', false);
            });
        }else{
            alert("Entro a guardar");
            $("#guardar").prop("value","Guardar");
            $("#registrarCentro").each(function(){
                $(this).attr("readonly",true);
                if(IngresarDatos()){
                    //alert("entro");
                    $.post("php/IngresarCentro.php", {nombre: $("#nombre").val(), direccion: $("#direccion").val(), telefono1: $("#telefono1").val(), telefono2: $("#telefono2").val(), parroquia: $("#parroquia").val()} , function(data){
                        if (data != 1){
                            $("#errorSection").html(data);
                        }else{
                            alert ("El centro ha sido agregado Exitosamente");
                        }
                        $("#registrarCentro")[0].reset()
                    });
                }   
            });
        }
    });
</script>

---

值确实会更改，但您正在使用按钮，并且还需要更改其文本。
尝试此代码（更改值但不更改文本）：

您还想更改按钮文本，如果是，请使用下面的代码

$(document).on('click', "#guardar", function () {

if ($(this).val() == "Modificar") {
    $(this).val("Guardar"); // change into $(this) and use .val()
    $(this).contents().filter(function(i,e){
        if ( this.nodeType == 3 && i == 2 )
            this.nodeValue = "Guardar"; // change button text
    });
    // another rest of the code
} else {
    alert("Entro a guardar");
    $(this).val("Modificar"); // change into $(this) and use .val()
    $(this).contents().filter(function(i,e){
        if ( this.nodeType == 3 && i == 2 )
            this.nodeValue = "Modificar"; // change button text
    });
    // another rest of the code
}
});


$(document).on('click', "#guardar", function () {

if ($(this).val() == "Modificar") {
    $(this).val("Guardar"); // change into $(this) and use .val()
    $(this).contents().filter(function(i,e){
        if ( this.nodeType == 3 && i == 2 )
            this.nodeValue = "Guardar"; // change button text
    });
    // another rest of the code
} else {
    alert("Entro a guardar");
    $(this).val("Modificar"); // change into $(this) and use .val()
    $(this).contents().filter(function(i,e){
        if ( this.nodeType == 3 && i == 2 )
            this.nodeValue = "Modificar"; // change button text
    });
    // another rest of the code
}
});

$("#value").on('click', function(){
    if ($(this).val() == "Modify") {
        $(this).val("Save");
    } else {
        $(this).val("Modify");
    }



});