Question

好的，我不知道为什么我的Codepen版本和我的实际版本行为不同，但是它们却有所不同。在我的Codepen中，两个窗口均以打开状态打开。在我的实际版本中，您只会看到两组 01-推迟和 02-批准。在这里，在我的代码段中，第一个文本框没有填充，但是值记录在控制台中。

好的，现在是我的问题。单击这些幻灯片中的任何一张，将在其下面打开一个带有2个选项的框。继续并取消。使用我的fun函数，当单击其中一个选项时，它将完美地获得3个变量（请在我的控制台中查看）。

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

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

https://jsfiddle.net/ywain/k288pxqa/

// 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>

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

0 个答案: