javascript - 试图将变量传递给另一个函数

Question

好吧，我不知道为什么我的 codepen 版本和我真正的版本不同，但它们是。在我的 codepen 中，两个窗口都以打开状态开始。在我的真实版本中，您只看到 2 组01-Postpone和02-Approve，它们应该是这样的。在这里，在我的代码片段中，第一个文本框不会填充，但值会记录在控制台中。

好的，现在我的问题。单击其中任何一张幻灯片会在其下方打开一个带有 2 个选项的框。继续并取消。使用我的有趣功能，当单击其中一个选项时，它会完美地获取 3 个变量（在我的控制台中查看它们）。

单击 PROCEED 时，我需要这 3 个变量，以便我可以将 ajax 发布到外部文件。如何将 3 个有趣的变量放入我的继续函数中？我认为使用 var，它们将是全局的，但我尝试了许多可能性，但没有成功访问它们。我不想使用 cookie，因为我确信没有它们这是可能的。

我还有另一个奇怪的问题，但那是我让这部分工作的另一天。任何帮助将不胜感激。

https://codepen.io/lepew/pen/agNBzo

// 00 - CANCEL
function cancel00() {
  alert("Cancel");
}
// End CANCEL

// 02 - PROCEED
function proceed01() {
  // Ajax will go here
  alert("This works.");
}
// End of PROCEED

// 03 - Get the data-field variables
function fun(obj) {
  var one = obj.dataset.self,
    two = obj.dataset.record,
    three = obj.dataset.selectedoption;
  //
  console.log(one, two, three);
  //
}

//external file
$(document).ready(function() {
  $(".dropdown-link").on("click", function() {
    //
    const tranSpeed = "slow";
    //
    //
    // Get code variable and be able to access this value elsewhere.
    var selectmycode = $(this).attr("data-selectedoption");
    //
    // Display the variable in CONSOLE.
    console.log(selectmycode);
    //
    // Get clicked option.
    var selOption = $(this).data("selectedoption");
    //
    // Out the value of selectedoption into text field thecode.
    var thecoder = $(".thecode").attr("value", selOption);
    //
    //
    //
    // Get next "here".
    var here = $(this).closest(".bind_Name").next(".here");
    //
    // Populate stuff.
    $(here).find("legend").text(`Option ${selOption}`);
    //
    // TO DETECT IF DATA HAS CHANGED.
    var dataChanged = $(here).data("seloption") !== selOption;
    $(here).data("seloption", selOption);
    console.log(dataChanged)
    //
    // Show the dropdown if data changed.
    var target = $(here).find(".dropdown-container");
    //
    // This will close all other open options.
    $(".dropdown-container").not(target).hide(tranSpeed);
    //
    if (dataChanged) {
      $(target).show(tranSpeed);
    } else {
      // Or toggle it otherwise.
      $(target).toggle(tranSpeed);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" onclick="fun(this);" data-selectedoption="01" data-record="123456820" data-self="123456830">01-Postpone
      </div>
      <!-- end of #dropdown-link -->
    </div>
    <!-- end of #dropdown -->
    <div class="dropdown">
      <div class="dropdown-link" onclick="fun(this);" data-selectedoption="02" data-record="123456820" data-self="123456830">02-Approve
      </div>
      <!-- end of #dropdown-link -->
    </div>
    <!-- end of #dropdown -->
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container">
      <fieldset>
        <legend></legend>
        <input type="text" class="thecode" data-code="">
        <input type="text" class="peter" data-user="123456820" value="123456820">
        <input type="text" id="mary" data-product="123456830" value="123456830">
        <div><a href="" onclick="return false" onmousedown="proceed01()">PROCEED</a></div>
        <div><a href="" onclick="return false" onmousedown="cancel00()">CANCEL</a></div>
      </fieldset>
    </div>
    <!-- end of #dropdown-container -->
  </div>
  <!-- end of #here -->
  <div class="bind_Note"></div>
</div>
<!-- end of #bind_Area -->

<br>
<br>
<br>

<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" onclick="fun(this);" data-selectedoption="01" data-record="123456820" data-self="123456831">01-Postpone
      </div>
      <!-- end of #dropdown-link -->
    </div>
    <!-- end of #dropdown -->
    <div class="dropdown">
      <div class="dropdown-link" onclick="fun(this);" data-selectedoption="02" data-record="123456820" data-self="123456831">02-Approve
      </div>
      <!-- end of #dropdown-link -->
    </div>
    <!-- end of #dropdown -->
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container">
      <fieldset>
        <legend>
          <div class="fubar"></div>
        </legend>
        <div>
          <input type="text" class="thecode" data-code="">
          <input type="text" class="peter" data-user="123456820" value="123456820">
          <input type="text" id="mary" data-product="123456831" value="123456831">
        </div>
        <!-- end of #blank div -->
        <div><a href="" onclick="proceed01();">PROCEED</a></div>
        <div><a href="" onclick="cancel00();">CANCEL</a></div>
      </fieldset>
    </div>
    <!-- end of #dropdown-container -->
  </div>
  <!-- end of #here -->

  <div class="bind_Note">
  </div>
</div>
<!-- end of #bind_Area -->

<br>
<br>
<br>

标签： javascriptjquery