如何將javascript數組傳遞給onclick =“（'here'）”？

Question

我有一個程序，要求我不斷地從屏幕上來回發送數組到服務器。 陣列很重要，所以我需要它。

因此它在onclick中作為一個php數組開始 - >它轉到javascript並再次調用php函數然后將其返回到javascript函數。 這就是我失去的地方。 返回php數組后，我試圖將其重新放入onclick中，以便當用戶再次單擊時，將使用onclick發送新數組。

我該怎么做呢？

到目前為止我有什么：

在javascript中，在收到成功消息並且PHP函數傳遞新數組之后，我有類似這樣的設置，其中msg保存值。 msg.question_id只保存一個整數，msg.array持有一個php數組。

document.getElementById('buttons').innerHTML ="<a href='javascript:void(0)' onclick=\"movie_guess('yes',"+msg.question_id+","+msg.array+")\"><img  src=\"/assets/yes.png\" ></a><a href=\"javascript:void(0)\" onclick=\"movie_guess('no',"+msg.question_id+","+msg.array+")\"><img  src=\"/assets/no.png\" ></a> ";

Answer 1

好吧，我想你不應該在ajax響應中返回PHP數組。 您可以將其作為帶分隔符的字符串發送。 成功響應后，您可以拆分它們並創建一個javascript數組。 您也可以使用JSON。 對其進行編碼以訪問它。

$phpArr=( 0 => 'Zero', 1 => 'One', 2 => 'Two'); // PHP Code
var jsArr= <?php echo json_encode($phpArr); ?>; // Javascript Code
for($i=0;<stop-condition>;$i++){      alert(jsArr[i]);  } // Javascript Code

Answer 2

這是您嘗試添加的元素，正確縮進：

<a href='javascript:void(0)' onclick=\"movie_guess('yes',"+msg.question_id+","+msg.array+")\">
  <img  src=\"/assets/yes.png\" >
</a>
<a href=\"javascript:void(0)\" onclick=\"movie_guess('no',"+msg.question_id+","+msg.array+")\">
  <img  src=\"/assets/no.png\" >
</a>

相反，你可以在沒有處理程序的情況下添加它（我也使用#作為鏈接目標;還要注意我如何避免需要轉義引號以及如何將長字符串拆分為多行）：

var buttons = document.getElementById('buttons');
buttons.innerHTML = 
  '<a href="#"><img src="/assets/yes.png"></a>'+
  '<a href="#"><img src="/assets/no.png"></a>'

然后將事件處理程序添加為函數。 這樣可以提高性能，並允許您傳遞當前作用域中可見的任何內容（我假設msg是一個javascript對象並且它不會更改）。 addEventListener還有onclick=function(){...}其他好處：

var links = buttons.getElementsByTagName("a");
links[0].addEventListener("click", function(){
  movie_guess('yes', mgs.question_id, msg.array);
});
links[1].addEventListener("click", function(){
  movie_guess('no', mgs.question_id, msg.array);
});

---

更長但更快的版本是根本不觸摸innerHTML ，而是操縱DOM：

var buttons = document.getElementById('buttons');
var aYes = document.createElement("a");
aYes.href = "#";
aYes.addEventListener(...);
var imgYes = document.createElement("img");
imgYes.src = "/assets/yes.png";
aYes.appendChild(imgYes);
buttons.appendChild(aYes);
var aNo = document.createElement("a");
...