javascript - 将函数的变量定义给另一个函数

Question

我有很多按钮，其值包含用户名(jason、chan、brad 等)，用户单击该按钮并将该按钮附加到特定的 div。示例:

<input type="button" onClick="nano();" id="name1" class="names"  name="jason" value="jason" />

并且它被转换为

<div id="name_selected"><input type="button" id="name1" class="added_name"  name="jason" value="jason" /></div>

当用户单击按钮时，nano 函数正在运行

function nano(){
$("#name1").click(function(){
$(this).appendTo("div#name_selected").removeClass("names");
$(this).addClass("added_name");
var name_value=$(this).attr("value");

});
}

真正的问题是我想获取所选按钮的值并使用ajax保存到数据库，以及如何定义name_value变量来函数ajaxSubmit()？

Uncaught ReferenceError: name_value is not defined

发生错误

function ajaxSubmit(){
            $.ajax({
                type:"POST",
                url:"z.php",
                cache:false,
                data:name_value,
                success:function(data) {
                    window.location.href="show.php";
                }
            });

        }

Answer 1

首先声明一个将在按钮单击时调用的函数:

/**
*   Function that performs various operations on button click
*   @param btn {jQuery object}: The button that triggered the click event
*/
function nano(btn) {   
   // Do your stuff here...       
   btn.appendTo("div#name_selected")
      .removeClass("names")
      .addClass("added_name");

   // Get the value attribute
   var name_value = btn.attr("value");

   // Make ajax call
   if (name_value) {
      ajaxSubmit(name_value);
   }       
}

声明将执行ajax调用的函数:

function ajaxSubmit(val) {
    // Check if 'val' is not undefined
    if (val) {
       $.ajax({
          type:"POST",
          url:"z.php",
          cache:false,
          data: { val: val },
          success:function(data) {
             window.location.href="show.php";
          },
          error:function() {
             // error handling here...
          }
       });
    }
}

在所需元素上添加事件监听器:

$(document).on('click', '.button-class', function() {
   // Call nano passing the clicked button as parameter
   // this --> the javascript object that triggered the click event
   // $(this) --> the jQuery object of 'this' 
   nano($(this));
});

<小时/>

重要:

从所有按钮中删除 onClick 属性! (不要使用它，而是使用 on() 函数添加事件监听器)