Question

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


// 01 - Slide Options open and get the "selectmycode".  VERY important.
$(document).ready(function()
{
    //
    $(".dropdown-link").on("click", function()
    {
        //
        // These 3 variables need to be accessed below, or just the first variable and get the text input fields on click of proceed01.
        var selectmycode = $(this).attr("data-selectedoption");
        // So redundant as it is also down below in a text field.
        var selectuser = $(this).attr("data-self");
        var selectproduct = $(this).attr("data-record");
        //
        // Display Results - TEST purposes only.
        alert("Process Code is: " + selectmycode);
        //alert("The DATA is: " + selectmycode + '-' + selectuser + '-' + selectproduct);
        //
    });
});
// End of slide options open.


// 02 - PROCEED
function proceed01()
{
    // Somehow, get the selectmycode from above.  Then get the 2 text fields data.
    var selecttest = document.querySelector(".mary").value;
    //var selecttest = $(this).attr("data-user");
    //var selecttest = $(this).attr("data-product");
    //The below comment will stop ALL functions from working !!!
    //How is that possible?
    //It seems to see ?>"; at the end.
    //var pepename31 = "<?php echo $pepename31 ?>";
    //
    // Action - Option
    //
    // Get the 3 variables to use with ajax POST.
    //
    // Display Results - TEST purposes only.
    alert(selecttest);
    //
}
// End of PROCEED

// This is an external file
$(document).ready(function()
{
    $(".dropdown-link").on("click", function()
    {
       //
       const tranSpeed = "slow";
       //
       // OPTIONAL - hide all dropdown containers.
       //$(".dropdown-container").hide(tranSpeed);
       //
       // POSSIBLE ??? Get code variable and be able to access this value elsewhere.
       //var selectmycode = $(this).attr("data-selectedoption");
       //
       // Get clicked option.
       var selOption = $(this).data("selectedoption");
       //
       // Get next "here".
       var here = $(this).closest(".bind_Name").next(".here");
       //
       // Populate stuff.
       $(here).find("legend").text(`Option ${selOption}`);
       //$(here).find("input[type=text]").val(`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>
<!DOCTYPE html>
<div class="bind_Area">
    <div class="bind_Name">
        <div class="dropdown">
            <div class="dropdown-link"
                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"
                 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="peter"
                        data-user="123456820"
                        value="123456820"
                    >
                    <input type="text" class="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"
                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"
                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></legend>
                    <input type="text" class="peter"
                        data-user="123456820"
                        value="123456820"
                    >
                    <input type="text" class="mary"
                        data-product="123456831"
                        value="123456831"
                    >
                    <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>

<!-- etc ... -->

你好：

好的，我的脚本有多个问题，非常感谢您的帮助。我已经尝试了好几天了，但我还是没有。从根本上说，这是一个采购订单系统，经理在此系统中做出个人决策，并逐笔记录。我不知道它是否有影响，但是索引页面有4个类别的选项卡。我将所有这些都放在一个Codepen中：

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

问题1：我有一个加载该页面的外部文件。多亏了Jon P，它是一个on.click函数，并且可以完美地工作。我需要这个数字来以后运行一些ajax。我尝试了许多从外部文件访问该值的可能性，但无法做到。它可以在内部函数中工作，但是如果我可以从外部文件中分配它，则可以保存一些代码...对吗？如果javascript变量是全局变量，为什么不能在另一个函数中访问该变量？可能是这样，我只是不知道如何。 // 问题2：我猜因为缺乏更好的JavaScript知识，我为html中显示的每个记录创建了数据字段（data-record和data-self）。我可以访问所需的那些变量，但是如果可能的话，我想在html文件中减少这些多余的字符。如果我可以解决问题5，则此问题无关紧要。

问题3：我有一个proce01函数，我想将其转换为ajax POST。我需要3个变量。第一个是选定的选项变量，请参见问题1。我希望从当前2个输入字段中获得其余2个变量。稍后将隐藏它们。如果可以从我的proce01函数中的on.click访问变量，则一切正常。如果我可以解决问题5，那么这也无关紧要。

问题4：这个我一生，我听不懂。在我的proced01函数中，我有以下评论。我的理解是，“ //”之后该行中的所有内容都将被忽略。当我运行文件并查看视图页面源代码时，它被弄乱了。由于某种原因，它不会忽略该行的后4个字符。那就是我的php的关闭。我也尝试过双引号，同样的事情。它将停止所有javascript函数的工作。我使用NotePad ++，有趣的是，当我将该行（带有注释）复制到php部分时，它也会看到最后4个字符并崩溃/停止。

// var pepename31 ='';

这是查看源代码时我的JavaScript中显示的内容： // var pepename31 =“
// 通知：未定义的变量： 110
行的 C：\ xampp \ htdocs \ products \ index.php 中的pepename31 ;

问题5：好的，这是个大问题，procedure01（）。这是我要添加ajax并将3个变量发送到php（process.php）文件的地方。我需要选择的选项，以及当前的2个输入字段。选定的选项将根据值/字符串在php中触发不同的mysql查询。其他2个字段是当前用户ID（由于只有1个用户登录，因此是恒定的）和产品编号（因记录而异）。当我运行我拥有的代码时，它将获得当前用户，但是当涉及到当前产品编号时，它将仅通过记录字段获得第一个记录的产品编号，而不是当前产品编号。我尝试了很多选项，但是它只是行不通，包括为其分配数据字段并尝试使用ID /类名。

我无法正确访问此变量

0 个答案: