Javascript结果为div

Q1：我的观点是创建许多按钮的行数很多。像这样，只出现一个按钮。Javascript结果为div

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

编辑我的更多的细节

来源

2012-11-26 pleaseDeleteMe

为什么混合jQuery和内联JS？糟糕的想法IMO ...似乎你错过了一些必要的jQuery概念...我建议你从头开始http://jqfundamentals.com/，从头开始。坏习惯很难退出。 – elclanrs

首先尝试.append（）而不是.html（）。我很确定.html（）替换.append（）添加的位置。 – Codeguy007

.html取代，和你报价不匹配。但这并不重要 - jQuery在操纵DOM方面比操纵字符串更好。尝试：

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

Here's a demo.

来源

2012-11-26 02:55:06 Ryan

这应该是被接受的答案 –

我深信，但它不符合我的需求。因为我需要给myFunction（）某些存储在myArray中的值来输出这样的数据：例如。 'myFunction（john，23，USA）'或'myFunction（name，age，country）'，因为唯一有效的方法是'myFunction（\''+ myArray [i] .join（“'，'”） + ...）' – pleaseDeleteMe

赋予'map'的函数中的'item'是数组中的元素。你可以阅读它的属性。 'myFunction（item.name，item.age，item.country）' –

这是因为要更换的HTML代码循环中的$("#save")。尝试
$("#save").append("<button onclick="myFunction('"+myArray[i]+"')">Click me</button>") ;

来源

2012-11-26 02:29:28

这是我第一次尝试。它的工作，但我不知道为什么创建重复的按钮，也许是我的数组有问题。编辑：我似乎不是，因为Akhil解决方案做对了 – pleaseDeleteMe

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) 
}

来源

2012-11-26 02:30:13 Lwyrn

您是不是要找这样的：

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

来源

2012-11-26 02:31:20

哦，这工作.. – Codeguy007

是的它的工作原理：D – pleaseDeleteMe

;）...................... –

你只看到一个按钮，因为.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); 
}

来源

2012-11-26 02:32:43

我试试你的方法:)看起来非常好！ – pleaseDeleteMe

为什么所有的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>

来源

2012-11-26 03:10:15

Javascript结果为div

回答

相关问题