javascript - 单击 View 时 Appcelerator 范围问题

Question

我在这里疯狂地试图找出为什么我的变量的范围无法从我的 Appcelerator 项目中的数据库的 60 个项目的循环中获取正确的值。

我的 map 标记显示了正确的标签，但是当我单击它时，无论我尝试哪种范围界定组合，我都无法在警报中获得正确的值。它每次只返回第 60 个条目。

可能是一个小学生的错误，但这让我发疯。

这是我的功能

function loadAnimals() {

var db = Ti.Database.open('myDB');

var getSpecies = db.execute('select * from species');
while (getSpecies.isValidRow()) {
    var speciesID = getSpecies.fieldByName('speciesnid');
    var speciesName = getSpecies.fieldByName('speciesname');
    var speciesDesc = getSpecies.fieldByName('speciesdescription');
    var speciesLatitude = getSpecies.fieldByName('specieslatitude');
    var speciesLongitude = getSpecies.fieldByName('specieslongitude');
    var speciesConStatus = getSpecies.fieldByName('speciesconservationstatus');
    var speciesMarkerFilename = getSpecies.fieldByName('speciesiconfilename'); 
    var speciesMarkerIcon = getSpecies.fieldByName('speciesmapicon');
    var speciesMarkerURI = getSpecies.fieldByName('speciesmapiconurl');
    var speciesImageFullPath = speciesMarkerURI.replace("public://", "http://myurl.com/");
    var speciesImageFullPath = speciesImageFullPath.replace(" ", "%20");
    var imageFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, speciesMarkerIcon);
    var iconFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, speciesMarkerFilename);


        var annotationView = Ti.UI.createView({
            backgroundColor: '#222222',
            width: 150,
            height: 75,
            layout:'vertical'
        });

        var addtoTourView = Ti.UI.createView({
            height:20,
            backgroundColor:'#6ea108'
        });


        var addtoTourTitle = Ti.UI.createLabel({
            color: '#FFF',
            text: 'ADD TO TOUR',
            width: 150,
            height: 15,
            top:3,
            textAlign: 'center',
            font: {
                fontSize: 14,
                fontWeight: 'bold'
            }
        });

        var annotationTitle = Ti.UI.createLabel({
            color: '#FFF',
            text: 'test',
            width: 150,
            height:15,
            top:0,
            textAlign: 'center',
            font: {
                fontSize: 14,
                fontWeight: 'normal'
            }
        });

        var blankView = Ti.UI.createView({
            backgroundColor: '#222222',
            width: 1,
            height: 73,
            borderRadius: 0
        });

        annotationView.add(addtoTourView);

        addtoTourView.add(addtoTourTitle);
        annotationView.add(annotationTitle);

        annotations.push(Map.createAnnotation({
            latitude: speciesLatitude,
            longitude: speciesLongitude,
            title: ' ',
            //pincolor: Map.ANNOTATION_RED,
            image: iconFile,
            animate: true,
            myid: speciesID,
            rightView: annotationView,
            leftView: blankView
        }));

        addtoTourView.addEventListener('click', function(e) {

            //alert(speciesName + ' has dded to Tour');

            var dialog = Ti.UI.createAlertDialog({
                message: 'Added to your Tour',
                ok: 'Continue',
                title: speciesName //this is the 60th entry, not the correct one
              });
              dialog.show();

            // do the insert into the DB
            var db = Ti.Database.open('myDB');
            db.execute('INSERT INTO tour (speciesnid) VALUES (?)', speciesID); // same with this ID, needs to the correct ID
            db.close();

        });

        annotationTitle.text = speciesName;


    //load up the next record
    getSpecies.next();

}; 
// close the database
getSpecies.close();

// add markers to map
mapview.annotations = annotations;

};//loadAnimals 函数结束

有人可以建议我做错了什么吗？

Answer 1

迈克尔的解决方案听起来不错。

无论如何，让我发布我想说的话。我重点解释范围问题，解释为什么您的代码没有达到您的预期。

<小时/>

在 javascript 中，作用域绑定(bind)到函数。当您在循环(for/while/do...)中声明变量时，事情可能会变得有点困惑。您没有创建新变量，您只是覆盖具有该名称的第一个(也是唯一一个)变量的值。

因此，函数 loadAnimals 中有 1 个变量，名为speciesName。在 while 循环中，您只需覆盖该变量的值。第 60 次迭代后，变量只会记住您最后设置的值。

当客户端点击标记时，循环结束，该值早已设置完毕。

<小时/>

注意:您的 map 服务可能提供了解决方案，但我不知道。

• 1 个解决方案:“这个”。

“this”变量告诉您​​受影响的内容。在 onClick 回调中，这是被单击的元素。

解决您的问题可能会涉及“这个”。但我不确定具体如何。

这是我的意思的一个例子。

<h2>Click on the animal</h2>
<p>dog</p>
<p>cat</p>
<p>hamster</p>
<script>
function loadAnimals() {
  var speciesName = '';
  var animalElements = document.getElementsByTagName('p');
  for (var i=0; i<animalElements.length; i++) {
    speciesName = animalElements[i].innerHTML ; // notice, this variable will be overridden, so this variable is useless within the onClick callback.
    animalElements[i].addEventListener('click', function(e) {
      // variable 'this' is the <p> that was clicked on.  
      var value_clicked_on = this.innerHTML;
      alert(value_clicked_on);
    });
  }
}
window.onload = loadAnimals;
</script>