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

回答

相關問題