Исправлен заголовок HTML и тег кнопки не обновлял текст

Question

Я пытаюсь написать код, который обновляет тег заголовка и тег кнопки. Однако, когда я использую метод .text();, он не работает. Поэтому я нашел правильный способ сделать это с помощью других вопросов о переполнении стека, и я вижу в основном то же самое. Все говорят мне использовать .text() или .html(). Так что я действительно запутался, почему это не работает. Я не уверен, имеет ли это какое-либо отношение к значениям, уже указанным в теге.

HTML:

<div class="contents">
  <div class="card text-center myCard">
    <div class="card-header"></div>
    <div class="card-body">
      <h5 class="card-title"></h5>
      <p class="card-text"></p>
      <button type="button" class="btn btn-primary ttBtn"></button>
    </div>
    <div class="card-footer text-muted"></div>
  </div>
</div>

jQuery:

$(".eBtn").on(
                    "click",
                    function(event) {


                        event.preventDefault();

                        var href = $(this).attr('href');
                        console.log(href);

                        $.get(href, function(ary2, status) {
                            $("#displayAppName").val(ary2.appname);
                            $("#appcode").val(ary2.appcode);
                            $("#editStatus").val(ary2.status);




                            if (ary2.mapstatus == "" || ary2.mapstatus == null) {
                                mapBool = true;
                                $("#mapStatus").val("");
                                $("#createBtn").val('Create');
                                $('#modalCreateBtn').attr(
                                        'href',
                                        '/create?currentAppcode='
                                                + ary2.appcode
                                                + "&currentAcro="
                                                + ary2.acronym
                                                + "&currentAppname="
                                                + ary2.appname);








                                console.log("Card Create: " + $(".card-title").val());



                            } else {
                                $("#mapStatus").val("Mapped");
                                $("#createBtn").val('Edit');
                                $('#modalCreateBtn').attr(
                                        'href',
                                        '/edit?currentAppcode='
                                                + ary2.appcode
                                                + "&currentAcro="
                                                + ary2.acronym);

                                  mapBool = true;


                                console.log("Card Edit: " + $(".card-title").val());


                            }

                        });

                          console.log("Main Boolean : "  + this.mapBool)
                          console.log("Main Boolean : "  + mapBool)
                            if(mapBool){
                                 $(".card-title").text("Application Mapped!");
                                 $(".card-text").text("Continue to view application");
                                $(".ttBtn").text("New Mapping after");
                            }

                        $("#exampleModal").modal();


                    });

jQuery Изменение HTML:

  $(".card-title").text("Application Mapped!");
  $(".card-text").text("Continue to view application");
  $(".ttBtn").text("Continue");

Answer 1

Созданная переменная ary2. Надеюсь, это поможет вам.

var ary2 = [];
if (ary2.mapstatus == "" || ary2.mapstatus == null) {
  $("#mapStatus").val("");
  $("#createBtn").val('Create');
  $('#modalCreateBtn').attr(
    'href',
    '/create?currentAppcode=' +
    ary2.code +
    "&currentAcro=" +
    ary2.acro +
    "&currentAppname=" +
    ary2.name);

  $(".card-title").text("Application Mapped!");
  $(".card-text").text("Continue to view application");
  $(".ttBtn").html("Continue");


} else {
  $("#mapStatus").val("Mapped");
  $("#createBtn").val('Edit');
  $('#modalCreateBtn').attr(
    'href',
    '/edit?currentAppcode=' +
    ary2.code +
    "&currentAcro=" +
    ary2.acro);

}
$(document).ready(function() {
  $(".card-title").text("Application Mapped!");
  $(".card-text").text("Continue to view application");
  $(".ttBtn").html("Continue");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contents">
  <div class="card text-center myCard">
    <div class="card-header"></div>
    <div class="card-body">
      <h5 class="card-title">Application not mapped!</h5>
      <p class="card-text">Click the "New Tier" button to begin mapping.
      </p>
      <button type="button" class="btn btn-primary ttBtn">New
        Mapping</button>
    </div>
    <div class="card-footer text-muted"></div>
  </div>
</div>