2012-03-08 84 views
0

javascript onclick関数に渡す配列があります。javascript onclick関数に配列を渡す

   var event_data = new Array(); 
       event_data.push(event_id); 
       event_data.push(event_title); 
       event_data.push(channel_id); 
       event_data.push(channel_name); 
       event_data.push(channel_onclick); 
       event_data.push(event_site); 
       event_data.push(event_url); 
       event_data.push(event_onclick); 
       event_data.push(start_date); 
       event_data.push(start_time); 
       event_data.push(end_date); 
       event_data.push(end_time); 
       event_data.push(event_notes); 

私は、ボタンのonclickイベントでその配列を送信します。

var span_string = '<span id=\"dt'+event_id+'\">'+print_span+'<br/><button href="#" onclick="edit_event('+event_data+');" style="width: 49px;">Edit</button><button href="#" onclick="delete_event();" style="width: 49px;">Delete</button></span>'; 
var event_id_string = 'mn'+event_id; 
$('#'+event_id_string).append(span_string); 

onclick関数は、そのコードではまったく呼び出されません。 event_data配列でこの関数を呼び出す別の方法はありますか?私はあなたがjQueryのを使用している、あなたがそれを行うことができ参照

function edit_event (event_data) { 
/* function edit_event() { */ 
    alert ('edit event'); 
    var event_id = event_data[0]; 
    var event_title = event_data[1]; 
    var channel_id = event_data[2]; 
    var channel_name = event_data[3]; 
    var channel_onclick = event_data[4]; 
    var event_site = event_data[5]; 
    var event_url = event_data[6]; 
    var event_onclick = event_data[7]; 
    var start_date = event_data[8]; 
    var start_time = event_data[9]; 
    var end_date = event_data[10]; 
    var end_time = event_data[11]; 
    var event_notes = event_data[12]; 

    var alert_string = 'event id '+event_id+'<br/>'+ 
    'event title '+event_title+'<br/>'+ 
    'channel id '+channel_id+'<br/>'+ 
    'channel name '+channel_name+'<br/>'+ 
    'channel onclick '+channel_onclick+'<br/>'+ 
    'event site '+event_site+'<br/>'+ 
    'event url '+event_url+'<br/>'+ 
    'event onclick '+event_onclick+'<br/>'+ 
    'start date '+start_date+'<br/>'+ 
    'start time '+start_time+'<br/>'+ 
    'end date '+end_date+'<br/>'+ 
    'end time '+end_time+'<br/>'+ 
    'notes '+event_notes+'<br/>'; 

    alert (alert_string); 
} 
+2

、あなたは'のvar EVENT_DATAは= [event_idが、EVENT_TITLE、...]を使用して、すぐにすべてのアイテムを持つ配列を作成することができますか; '? –

+0

あなたはjQueryを使用しているようですが、どうしてhtmlのインラインイベントハンドラを使用していますか? ['.on()'](http://api.jquery.com/on/)のようなjQueryのイベントバインディングメソッドは、データをイベントハンドラに渡すためのメカニズムを持っています。 (ブラウザで「ソースの表示」を使用すると、現在の方法が機能しない理由がわかります) – nnnnnn

答えて

1

私は、このアプローチになってしまいました。

イベントデータをグローバル変数にします。

var events_data; 

edit_event()関数にevent_idを渡します。

var span_string = '<span id=\"dt'+event_id+'\">'+print_span+'<br/><button href="#" onclick="edit_event(\''+event_id+'\');" style="width: 49px;">Edit</button><button href="#" onclick="delete_event();" style="width: 49px;">Delete</button></span>'; 

edit_event関数で、選択したevent_idのイベントデータを取得します。あなたは `push`を使用しないのはなぜO_O

function edit_event (event_id) { 
     for (var i=0; i<events_data.event_id.length; i++) { 
      var site = ""; 
      var onclick = ""; 
      if (event_id == events_data.event_id[i]["0"]) { 
        . 
        . 
        . 
      } 
     } 
    } 
1

このような何か:

Htmlの

<span id="mySpan">Stuff</span> 

JS

$('#mySpan').click(function(){ 
    edit_event(event_data); 
}); 
+0

私はいくつかのタグを持っています。このアプローチでは、イベントデータはすべてのスパンで同じになります。 – user823527

2

あなたはねそれを歌う弦として渡すそれをオブジェクトとして渡す必要があります。

onclick="edit_event(event_data);" 
0

通常、あなたのhtmlにはイベントを指定したくありません。代わりに、クリックイベントを割り当てる:

var event_data = ...; 
$('#dt' +event_id).click(function(e){ 

    // put your click logic here 

    // now you can access your array here by closure 
    event_data.doSomething(); 
}; 
1
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>json pass</title> 
     <script type="text/javascript" src="ga/jquery.min.js"></script> 

<script type="text/javascript"> 
       var mydata = [{ 
          newsid: '10001', 
          sectionName : 'SLIDESHOW', 
          title : 'The picture of slide show..', 
          slideShow : true, 
          slideShowID : [ 
              "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", 
              "gallery-1.jpg", "gallery-2.jpg", "gallery-3.jpg", "gallery-4.jpg", "gallery-5.jpg", "gallery-6.jpg", "gallery-7.jpg" 
              ], 
          level : 0 
         }]; 

      function testMyFn(fnData) 
      { 
       $.each(fnData, function (key, value) { 
        alert(value); 
       }); 
      }    

      $(function(){ 
       $('#myFnDiv').html("<a href='#' onclick='testMyFn(mydata[0].slideShowID);' >Get Test fn</a>") 
      }); 

</script> 
</head> 
<body> 

<div id="myFnDiv">dsd</div> 

</body> 
</html> 
関連する問題