點擊傳參，字符串拼接

常用字符串拼接傳參

初始化變量時，js 不允許左邊是表達式

 function  auto(num){
     // var一個變量
      var name = "test"+num;   //生成函數名
      window[name] = 100;
      window['name'] = 200;   //注意看中括號裏的內容加引號和不加引號的區別
 }

• window用中括號的方式定義 變量時，中括號裏的內容應該是字符串。
• 如果是一個變量的話，他就會解析這個變量找到具體的值。

*拼接參數案例

聲明變量
var str_a = '你好';
var str_b = 'hello';
function test(s){
    return window['str_' + s];
}
//調用方法並傳入參數
console.log(test('a')); //你好
console.log(test('b')); //hello

'<a οnclick="editCsRole(roleId)" class="openNewTab">編輯</a>';
其中 roleId 是變量，爲實現數據的有效傳遞對 roleId 嵌套拼接如下，
var param="'"+roleId+"'";
var a = '<a οnclick="editCsRole('+ param +')" class="openNewTab">編輯</a>';
上述，單引號和雙引號是交替實用的，因此，可以簡化爲如下形式：
var a = '<a οnclick="editCsRole('+"'"+roleId+"'"+')" class="openNewTab">編輯</a>';

js 拼接字符的兩種語法

//可以這樣引入變量作爲字符串形式：**“+變量+”**；
//如果外面有引號**，則如下：**‘”+變量+”’或\”“+變量+”\”**
//可以這樣引入變量作爲字符串形式："+變量+"
//這是語法，不要糾結
/如果外面有引號，則如下：'"+變量+"'  或    \""+變量+"\"
str = str + "<a href='#' title='詳情' class='qq' οnclick='auto(\""+data.id+"\")'></a>";

1.拼接的時候採用內雙外單或相反的格式,保證引號是一對一對的
2 超過兩層關係 就要用轉義

//js代碼
str +='<a href="#" οnclick=test("' + p1+ '","'+ p2+ '",' + p3+ ');>'+鏈接+'</a>';
//或者
str+="<a href='javascript:void(0);' οnclick=\"test('" + p1 + "','" + p2 + "'," + p3 +");\">鏈接</a>";
頁面顯示效果如下:

 <a href="javascript:void(0);" οnclick="test('p1','p2',p3);">鏈接</a>

js 拼接傳參 點擊事件

 <div id="box">
 </div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
    function show(a,b) {
        //console.log(a.name);
        //console.log(a.age);
        console.log(a);
        console.log(b);
    }
 
    function show2(a) {
        console.log(a);
        alert(a);
        console.log(a.name);
        console.log(a.age);
 
    }
 
    var arr = [
        {
            name:'wangwu',
            age:23,
            hight:[180,180,180]
        },
        {
            name:'zhangsan',
            age:22,
            hight:[180,160,180]
        },
        {
            name:'lisi',
            age:21,
            hight:[180,170,180]
        }
    ] 
    var ht=''
    for(var i=0 ; i< arr.length ; i++){       
        //錯誤，點擊事件不觸發程序已執行
        //ht = ht + '<div><button οnclick="show(arr[i].name,arr[i].age)">我是按鈕'+i+'</button></div><br>'
 
        //錯誤,點擊事件在頁面加載時候就已執行
        //ht = ht + '<div><button οnclick="'+show(arr[i].name,arr[i].age)+'">我是按鈕'+i+'</button></div><br>'
 
        //錯誤點擊事件不觸發
        //ht = ht + '<div><button οnclick="show('+arr[i].name+','+ arr[i].age +')">我是按鈕'+i+'</button></div><br>'
 
        //錯誤
        //ht = ht + '<div><button οnclick=show2("'+arr[i]+'")>我是按鈕'+i+'</button></div><br>'
        //使用轉義字符
        // ht="<a href='#' onclick = 'show(\""+ arr[2].name +"\")'> 轉義</a > "
         //使用轉義字符傳遞兩個參數
    // ht= "<a href='#' οnclick=\"show2('" + arr[2].name + "','" + arr[2].age + "')\">a標籤</a>"
         //正確傳遞一個參數
         // var ht = '<button οnclick=show("' + arr[0].name + '")>我是按鈕</button>'  
        
        //正確 傳遞兩個參數
        //ht = ht + '<div><button οnclick=show("'+arr[i].name+'","'+ arr[i].age +'")>我是按鈕'+i+'</button></div><br>'
        
        //正確案例 傳遞json數據
        ht = ht + '<div><button οnclick=show2('+JSON.stringify(arr[i])+')>我是按鈕'+i+'</button></div><br>'
 
    }
    $('#box').append(ht)
</script>

綁定事件的兩種方式

在屬性上綁定事件案例

<div onclick=“ck('hello')” id=“div”></div>
<script>
    function ck(str){
        console.info(str);
    }
</script>123456

注意：在屬性上綁定事件，是方法的調用，因此需要加（）表示調用此方法，如果需要傳入參數則寫入準確的參數。此方法可以傳參數

動態綁定

直接把方法名賦給屬性。

這種方式一般綁定不帶參數的方法。如果給屬性綁定帶參數的方法，會默認傳遞事件對象。

<script>
    var odiv = document.getElementById(“div”);
    odiv.onclick = auto;//此處不能帶（）
    function auto(){
        console.info("hello");
    }
</script>

給屬性定義匿名方法。這種方法不能傳參數。

<script>
    var odiv = document.getElementById(“div”);
    匿名點擊事件方法
    odiv.onclick = function (){
        console.info("hello");
    }
</script>

可以的傳參事件

//定義一個傳入參數的函數
function method(str){
    console.info(str);
}
//在匿名函數裏面調用method函數，並傳入參數
div.onclick = function(){
   調用函數方法，並傳入方法
    method("hello");
}

綁定到元素上的事件不能直接傳參

要想實現點擊傳參，可以調用其他函數

        錯誤案例  在此處點擊事件不能傳遞參數
        //$("#btnsure").on('click', function (e,obj) {
       //   console.log(obj)
      //    a(obj)
     // })
    // 正確案例
      $("#btnsure").on('click', function (e) {
        // console.log(obj)
          調用函數，並攜帶參數
         a(obj)
      })
    
    var obj = [
           {
               name:'wangwu',
               age:23,
               hight:[180,180,180]
           },
    
           {
               name:'zhangsan',
               age:22,
               hight:[180,160,180]
           },
           {
               name:'lisi',
               age:21,
               hight:[180,170,180]
           }
       ]
    function a( obj) {
      console.log(obj);
    }