如何根据单击的元素将不同的参数传递给函数？

Question

我是新手，所以如果我不是太明确，请不要对我太苛刻。我制作了一个带有两个测试按钮的 HTML 文件。我创建了一个test()在 JavaScript 中调用的函数，其中包含一个到文件的 Ajax POST 方法test.php。在PHP文件写入1和0名为的文本文件test.txt。所有这一切只需一个按钮。一切正常，但我有这个问题：我希望test()在第二个按钮中调用我的函数，该按钮具有不同的数据test2.php，例如tag_test2, phptag_test2, On_test2,等其他 4 个变量toggle_test2。所以需要编写一个函数test(testphp, tag, phptag, toggle, On)来为这两个具有不同参数的按钮调用它。我试过这个功能。function test(testphp, tag, phptag, On, toggle) {    if (toggle_test == 0) {        toggle = 1;        On = 1;        tag = On;        document.getElementById("result").innerHTML = On;        $.ajax({            type: "POST",            url: testphp,            data: {                phptag: tag            }        });        return test;    }    if (toggle == 1) {        toggle = 0;        On = 0;    }    tag = On;    document.getElementById("result").innerHTML = On;    $.ajax({        type: "POST",        url: testphp,        data: {            phptag: tag        }    });}}并在我的第一个按钮中调用它以查看它是否有效，但到目前为止还没有成功。我替换test()为test('test.php', tag_test, phptag_test, On_test, toggle_test).测试.php<?php$tag_test = $_POST['phptag_test'];$file=fopen('test.txt', 'w');fwrite($file, $tag_test . "\n");fclose($file);?>这写入test.txt文件。我的jquery-3.4.1.js文件夹中还有一个文件。

Answer 1

这是我认为可以解决您的主要问题的一些代码，即将动态值传递给函数。

基本上，方法是：

id为每个按钮添加唯一的属性

添加一个点击处理程序

根据单击的按钮定义不同的函数参数

然后，您将能够通过有条件地处理传递给服务器端代码的值来处理不同的场景。

jsFiddle 链接

注意：jsFiddle 用于mockjax在从服务器检索结果时模拟延迟，并将多个值记录到控制台，以便您可以更好地了解代码中发生的情况，但您可以在实现时删除所有这些代码

HTML

<!-- added unique id's to your buttons -->

<div class="container">

  <button id="button1" type="button" class="btn btn-success">Test1</button>

  <button id="button2" type="button" class="btn btn-success">Test2</button>

  <div id="result"></div>

</div>

JS

// added on click handler

$(document).on("click", "#button1, #button2", function() {

  // get reference to the instance of the button  

  var instance = $(this).attr("id");

  // sanity check  

  console.log("the instance is: " + instance);

  // create an object to store function parameters

  var parameters = {};

  // assign different values based on the instance  

  if (instance === "button1") {

    parameters.php_file = "my_file_1.php";

    parameters.tag = "tag 1";

    parameters.phptag = "php tag 1";

    parameters.is_toggled = true;

    parameters.is_on = false;

  } else if (instance === "button2") {

    parameters.php_file = "my_file_2.php";

    parameters.tag = "tag 2";

    parameters.phptag = "php tag 2";

    parameters.is_toggled = false;

    parameters.is_on = true;

  }

  // call the function

  my_function(parameters);

});

const my_function = (parameters) => {

  var php_file = parameters.php_file;

  $.ajax({

    url: `/path/to/your/file/${php_file}`,

    data: parameters, // send the parameters to your server side file

    type: "POST", 

    success: function(response) {

      // handle the response here  

      $("#result").text(response);

    }

  });

}

CSS

.btn-success {

  background-color: #2E64FE;

  border: none;

  color: white;

  padding: 10px 20px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 20px;

}

.btn-success:hover {

  background-color: blue;

}

.btn-success:focus {

  background-color: #2E64FE;

}

.btn-success:active:focus {

  background-color: blue;

}

.Header2 {

  padding: 50px;

  font-size: 50px;

  text-align: center;

  color: white;

  background-image: linear-gradient(#0033cc, #58FAF4);

  border: solid;

}

.space {

  padding: 25px;

}

.container {

  padding-left: 80px;

}

#instance {

  font-size: 18px;

  color: black;

  font-weight: bold;

  margin-top: 20px;

  font-family: arial;

}

#result {

  font-size: 38px;

  color: deeppink;

  font-weight: bold;

  margin-top: 20px;

  font-family: arial;

}

Answer 2

只是我的想法。您将如何检测被单击的按钮并抛出一个条件，如果单击了 button2，则执行 ajax 调用以及对 button1 执行相同的操作。

   <button type="button" class="btn btn-success" id="button1" onclick="test(this.id)">Test</button>

   <button type="button" class="btn btn-success" id="button2" onclick="test(this.id)">Test2</button>

   <script>

     function test(button_id) {

          if(button_id == "button1"){

            // do your ajax here

          }else if(button_id == "button2"){

            // do your ajax here

          }

      }

   </script>

Answer 3

最简单的方法是在onClick事件中传递数据。

例子

像这样传递 urls 文件名和数据字符串。

<button id="test" name="test" onClick="Test('test1', 'test_string_1');">Click Me </button>

<button id="test" name="test" onClick="Test('test2', 'test_string_2');">Click Me </button>

然后如果你的Test函数像这样使用它们。

function Test (filename, data){

    document.getElementById("result").innerHTML = data;

    $.ajax({

        type: "POST",

        url: filename + ".php",

        data: {

            phptag_test: data

        }

    });

}

这只是一个伪示例，您需要为所需的功能编写自己的版本。