javascript - jQuery callback OR how to pass a function inside another function

Question

Simple stuff really, but I'm stuck so hopefully someone will be able to help me out.

I've got two click events in jQuery, one fetches a number, and the other selects an input field. They both technically work, as I'm able to console.log both of them and get expected results. However, I'm unsure how to make them interact, and I have a feeling callback might be the solution (but any thoughts are appreciated)

The objective here is to pass the variable uValue inside an input field that is stored in variable caclField

The function below grabs a number that the user selected in a pop-up modal and puts it inside var uValue. I'm able to console.log uValue as I select the number, so the code works:

$(".uvalue-table a").click(function(u){
  u.preventDefault();
  var uValue = $(this).parent().prev().text();
  $("#calculateUValue").modal('hide');
    console.log(uValue);
});

Since we have a few unique input fields, the code below selects a particular one that we need:

$(".calc-uv").click(function() {
  var calcField = $(this).parent().prev().find("input");  
  console.log(calcField);  
});

Again, I'm able to console.log calcField and I get an object with the correct input ID in it, so this part technically also works.

Since both variables are being printed out in console, I'm now thinking that there must be a way to put uValue inside the calcField without changing my code too much.

I've tried putting

 calcField.val(uValue);

Inside

$(".calc-uv").click(function() {

But obviously when that function is fired uValue is not defined yet. Not sure how to work around this.

Thank you for any input.

Minimal HTML: Example of one of the input fields and a button next to it (this gets repeated multiple times) Apologies for the poor presentation.

<div class="col-lg-12">

                                                                        <div class="form-group">

                                                                            <label for="heatloss_window1UValue">U-Value<span class="text-warning"></span></label>

                                                                            <div class="row">

                                                                                <div class="col-lg-9">

                                                                                    <div class="input-group mb-3">

                                                                                        <div class="input-group-prepend">

                                                                                            <div class="input-group-text">W//m2k</div>

                                                                                        </div>

                                                                                        <input type="text" class="form-control" id="heatloss_window1UValue" name="otherwindow[0][heatloss_window1UValue]">

                                                                                    </div>

                                                                                </div>

                                                                                <div class="col-lg-3">

                                                                                    <button type="button" class="calc-uv btn btn-dark mb-3" data-toggle="modal" data-target="#calculateUValue"><i class="fas fa-chevron-right"></i> Calculate U-Value</button>

                                                                                </div>

                                                                            </div><!-- /row -->

                                                                        </div>

                                                                    </div><!-- /col -->

标签： javascriptjqueryfunctioncallback

Answer 1

您可以添加一个全局变量：

$(".calc-uv").click(function() {
  var uValue = $(".uvalue-table a").parent().prev().text();
  console.log(uValue);

  var calcField = $(this).parent().prev().find("input");
  calcField.val(uValue);
});

<p>123</p>
<div class="uvalue-table">
  <a>Anchor</a>
</div>

<div class="col-lg-12">
  <div class="form-group">
    <label for="heatloss_window1UValue">U-Value<span class="text-warning"></span></label>
    <div class="row">
      <div class="col-lg-9">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <div class="input-group-text">W//m2k</div>
          </div>
          <input type="text" class="form-control" id="heatloss_window1UValue" name="otherwindow[0][heatloss_window1UValue]">
        </div>
      </div>
      <div class="col-lg-3">
        <button type="button" class="calc-uv btn btn-dark mb-3" data-toggle="modal" data-target="#calculateUValue"><i class="fas fa-chevron-right"></i> Calculate U-Value</button>
      </div>
    </div>
    <!-- /row -->
  </div>
</div>
<!-- /col -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>