Question

Q1：我的观点是创建许多按钮尽可能多的数组行。像这样，只出现一个按钮。

<script type="text/javascript">
var myArray = [];

$('#button').click(function(){

var value1 = $('#value1').val();
var value2 = $('#value1').val();
var value3 = $('#value1').val();
var newArray = []; 
var newArray[0] = value1;
var newArray[1] = value2;
var newArray[2] = value3;
myArray.push(newArray);

$("#save").append(
    $("<button>").click(function() {
        myFunction.apply(null, myArray);
    }).text("Click me!")
   );
   });

});

function myFunction(value1,value2,value3)
{
var jsonData = $.ajax({
url: "file.php?value1=" + value1 + "&value2=" + value2 + "&value3=" + value3
dataType: "json",
async: false
}).responseText;
(...)
}
//edited: problem maybe found. I said buttons dont do anything because of this.
OUTPUT: file.php?value1=paul,23,USA&value2=undefined&value3=undefined
//it seems that value1 gets all values :s
</script>


<div id ="save"></div>

我正在寻找能够像这样回归的解决方案：

例如：

<!--<button onclick="myFunction(name,age,country)">Click me</button>-->
<button onclick="myFunction(paul,23,USA)">Click me</button>
<button onclick="myFunction(john,23,USA)">Click me</button>

编辑更详细的代码

Answer 1

.html替换，您的报价不匹配。但是没关系 - jQuery在操纵DOM方面要比操纵字符串更好。尝试：

$("#save").append(
    $.map(myArray, function(item) {
        return $("<button>").click(function() {
                   myFunction.apply(null, item);
               }).text("Click me");
    })
);

Here's a demo.

Answer 2

你的意思是：

    <div  id="save">
    </div>      
    <script type="text/javascript">
        function addButtons(){
            for(i=0;i<myArray.length;i++)
            {
                var button = $('<button id="btn_'+i+'" onclick="myFunction(this);">Click me</button>')
                $(button).data('details',myArray[i]).appendTo("#save");
            }
        }
        function myFunction(element){
            alert($(element).data('details'));
        }
    </script>

Answer 3

您只看到一个按钮，因为.html()方法替换元素的html。它没有附加。

幸运的是，jQuery有一个适合你想要的行为的方法，恰当地称为append。将其更改为如下所示：

for(i=0;i<myArray.length;i++)
{
  var button = $("<button>Click me</button>");
  $("#save").append(button) ;
}

我故意将onclick行为从该片段中删除。你可以像你一样在你创建的按钮的html中编写它，或者你可以用jQuery来编写它 - 第二种方法更可取，看起来像这样：

for(i=0;i<myArray.length;i++)
{
  var button = $("<button>Click me</button>")
               .click(function(){
                    // call the actual function you want called here
               });
  $("#save").append(button);
}

Answer 4

这是因为您正在替换循环中$("#save")中的html。尝试
$("#save").append("<button onclick="myFunction('"+myArray[i]+"')">Click me</button>") ;

Answer 5

for(i=0;i<myArray.length;i++){
    //Create a new DOM button element ( as jQuery object )
    // Set the current button index, and add the click action
    var button = $('<button />').data('myindex', i).click(function(){
        var myArrayItem = myArray[$(this).data('myindex')];
        alert(myArrayItem);
    }).html('My label n. '+i);
    $('#save').append(button)
}

Answer 6

为什么要烦扰所有的JQuery和复杂的代码，只需用简单的方法来实现这个

<script type="text/javascript" >
    var myArray = ["New York", "Boston", "San Jose", "Los Angeles"];

    var strHTML = "";
    for(i=0;i<myArray.length;i++)
    {
        strHTML += "<button onclick='myFunction("+i+")'>Click me</button>";
    }       

    $("#save").innerHTML = strHTML;

    function myFunction(index)
    {
        alert(index);
        // do your logic here with index
    }
</script>

Javascript结果为div

6 个答案: