javascript - 使用 Javascript 循环将 PHP 数据发送到 Modal

Question

我使用 data-* 在模态上发送值。数据由 MySQL 查询填充。

这是 while 循环下的编辑代码按钮:

<div class="btn-group">
   <a class="btn btn-primary" href="#">Action</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
   <span class="fa fa-caret-down"></span></a>
   <ul class="dropdown-menu">
   <?php
   $li = "<li><a class=\"open-EditRow\" data-invno=\"".$invno."\" data-date=\"".$date."\" data-shipment=\"".$shipment."\" data-bcrp=\"".$bcrp."\" data-adjbcrp=\"".$adjbcrp."\" data-begbal=\"".$begbal."\" data-adjrpbc=\"".$adjrpbc."\" data-transrpbc=\"".$transrpbc."\" data-promo=\"".$promo."\" data-damages=\"".$damages."\""; 
   foreach($i as $k)
   {
        $li.=" data-".strtolower($k)."=\"".$b[$k]."\"";
   }
   $li.=" title=\"Edit this row\"><i class=\"fa fa-pencil\"></i> Edit</a></li>";
   echo $li;
   ?>
   </ul>
</div>

echo htmlentities($li) 返回:

<li><a class="open-EditRow" data-invno="2" data-date="2015-04-02" data-shipment="23" data-bcrp="41" data-adjbcrp="0" data-begbal="1500" data-adjrpbc="3" data-transrpbc="46" data-promo="3" data-damages="6" data-cebu="100" data-danao="200" data-talisay="0" title="Edit this row"><i class="fa fa-pencil"></i> Edit</a></li>

这是正确的。

数组$i中的数据来自MySQL查询，这些是它的数据:

• 宿务
• 达瑙
• 塔里萨伊

以下是编辑模式代码:

<?php
    foreach($i as $j)
    {
        ?>
        <div class="form-group">
        <label class="col-sm-3 control-label"><?php echo $j; ?></label>
        <div class="col-sm-5">
        <input type="text" class="form-control" name="<?php echo $j; ?>" id="<?php echo $j;?>"/>
        </div>
        </div>
        <?php
    }
?> 

这是它的 jquery 代码:

$('.open-EditRow').click(function(){
   var invno = $(this).attr('data-invno');
   var date = $(this).attr('data-date');
   var shipment = $(this).attr('data-shipment');
   var bcrp = $(this).attr('data-bcrp');
   var adjbcrp = $(this).attr('data-adjbcrp');
   var begbal = $(this).attr('data-begbal');
   var adjrpbc = $(this).attr('data-adjrpbc');
   var transrpbc = $(this).attr('data-transrpbc');
   var promo = $(this).attr('data-promo');
   var damages = $(this).attr('data-damages');
   var centers = <?php echo json_encode($i); ?>;

   $('#myModal #invno').val(invno);
   $('#myModal #date').val(date);
   $('#myModal #shipment').val(shipment);
   $('#myModal #bcrp').val(bcrp);
   $('#myModal #adjbcrp').val(adjbcrp);
   $('#myModal #begbal').val(begbal);
   $('#myModal #adjrpbc').val(adjrpbc);
   $('#myModal #transrpbc').val(transrpbc);
   $('#myModal #promo').val(promo);
   $('#myModal #damages').val(damages);

   centers.forEach(function(entry) {
       var center1 = entry.toLowerCase();
       var center2 = 'data-' + center1;
       var center = $(this).attr('data-' + center1);
       $('#myModal #' + center1).val(center);
       alert(center);
    });

   $('#myModal').modal('show');
});

我正在循环所有内容，因为它是动态值，但警报 var center 返回未定义，var center1 和 var center2 返回正确的数据。我认为我的 jquery 代码有问题，因为它没有在编辑模式上返回正确的数据。

Answer 1

当调用不属于您所在对象原型(prototype)的函数时，this关键字不再引用您所在的对象。每个函数都使用this 关键字来设置其范围。当您使用 new 关键字调用函数时，该函数应返回要绑定(bind)到该函数的 this 的对象。

function AObject(){  // if you use the new keyword convention is to Capitalist
    .. do stuff ...
    this.aValue = 1;

    // if called with the new keyword this function will return this
}
var aObj = new AObject(); // Creates an object and binds this to that new object
aObj.aValue === 1; //  is true

也可以这样做

function bObject(){
    var obj = {}; // create an object
    obj.bValue = 1;
    return obj;  // return object referance
}
var bObj = bObject();
bObj.bValue === 1;  // is true

需要一点经验才能知道何时以及如何使用 this 关键字，但我发现当有疑问时，可以使用 Function 对象的方法 bind() 来设置所需对象的“this”关键字非常有用。

方法不对

function MyObj(){
    this.anArray = [0,1,2,3,4,5];
    this.mag = 2;
    var sumMag = 0;
    this.anArray.forEach(function(item){
        sumMag += item * this.mag; // the code will create an error as 
                                   // this points to the global this
    });
    console.log(sumMag); // the code never get here
}

正确执行此操作(并使用最佳实践)

function MyObj(){  // Always capabilities a class type object
    // always loft functions to the top of the function block
    // Some environments will insist you do this if you use "strict mode"
    // 
    var myItteratorFunc = ( function(item){  // note the bracket
        sumMag += item * this.mag;  
    } ).bind(this); // binds the current this to the function

    // or you can
    /*
    var myItteratorFunc = function(item){  
        sumMag += item * this.mag;  
    };
    var boundItterator = myItterator.bind(this);
    */

    this.anArray = [0,1,2,3,4,5];
    this.mag = 2;
    var sumMag = 0;
    this.anArray.forEach(myItteratorFunc);  // best practice and looks better
    console.log(sumMag); // logs -> 30
}

Bind 对于 setIntervale 和 setTimeout 来说非常方便，对于许多 DOM 事件(例如 onload)也非常方便

设置间隔的方法错误

function MyClass(){
    this.tick = 0;
    setInterval(function(){
            this.tick += 1;  // fails
        },
        1000
    );
}

加载方式错误

function MyClass(){
    this.imageLoaded = false;
    var img = new Image();
    img.src = "URL";
    img.onload = function(){
         this.imageLoaded = true; // wrong "this" is pointing to the img object
                                  // and now img.imageLoaded === true
    };
}

setInterval的正确方法

function MyClass(){
    var tickFunction = (function(){  // loft function to top
        this.tick += 1;
    }).bind(this);  // bind it to this object
    this.tick = 0;
    setInterval(tickFunction,1000); 
}

Onload 如果您需要引用当前的 this，则正确的方法，否则 this 将引用加载的图像。

function MyClass(){
    var imgLoadFunc = (function(){ // loft function
         this.imageLoaded = true;
    }).bind(this);  // bind it to this

    this.imageLoaded = false;

    var img = new Image();
    img.src = "URL";
    img.onload = imgLoadFunc;
}

绑定(bind)也可以用于静态对象

var aThing = {
    numberLegs:2,
    canWalk:true,
    talk:(function(){   // create a method for aThing
        var str = "I have "+this.numberLegs;  // get the number of legs
        if(this.canWalk){  // can it this walk
            str += " and can walk.";
        }else{
            str += " but can't walk.";
        }
        console.log(str);
    }).bind(aThing)    // bind it to the static reference of aThing
};

aThing.talk(); // logs -> I have 2 legs and can walk.

请参阅 MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind有关绑定(bind)的更多信息。