在我的appinventor应用程序中，我使用webviewer查看包含listview的html页面。现在，我有十个列表项，我在html代码中编写它们。如果我的列表中有12个项目在代码中为urlArray.length=12，我是否可以将项目添加到列表中，如下所示？
<li>
<a href="#gummies" onclick="datasent(10);"><img src="write.png" id="listimg9" alt="Gummy Bears" /><span id="testscore9" class="ui-li-count">12</span>
<h1 id="testname9"> Test Name 9 </h1>
<p id="testexp9">Test Explanation 9</p>
</a>
</li>
</ul>
正如您在代码中看到的那样，列表datasent(10)中的第11项应为datasent(11)，id="listimg9"应为id="listimg10"，id="testscore9"应该是id="testscore10"，id="testname9"应为id="testname10"，id="testexp9"应为id="testexp10"
如果有更好的解决方案，比如根据urlArray的长度生成列表，这将是一个更好的解决方案，但目前，我不知道如何将这些id标签放在li里面打字以外的其他项目。
<script>
var datasent = function (listindex) {
window.AppInventor.setWebViewString(listindex);
};
var wvdata = window.AppInventor.getWebViewString().split('\n');
var urlArray = [];
for (var i in wvdata){
urlArray.push(wvdata[i].split('%'));
}
for (var s=0; s<urlArray.length; s++) {
var tn = "testname";
var ts = "testscore";
var te = "testexp";
var im = "listimg";
var testnamer = tn.concat(s);
document.getElementById(testnamer).innerHTML = urlArray[s][2];
var testscorer = ts.concat(s);
document.getElementById(testscorer).innerHTML = urlArray[s][3];
var testexper = te.concat(s);
if (urlArray[s][1]==="mc"){
document.getElementById(testexper).innerHTML = "Choose the correct answer!";
}
else {
var imer = im.concat(s);
document.getElementById(testexper).innerHTML = "Fill in the blanks!";
document.getElementById(imer).src="write.png";
}
}
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>List App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div id="photos" class="wrapper">
<header data-role="header" data-theme="b">
<h1> Tests </h1>
</header>
<article data-role="content" style="background: #000000 url('bg2.jpg') repeat;">
<ul
class="tests-list"
data-role="listview"
data-inset="true"
data-theme="b"
data-count-theme="a"
>
<li>
<a href="#" onclick="datasent(1);"><img src="mcicon.png" id="listimg0" alt="Gummy Bears" /><span id="testscore0" class="ui-li-count">12</span>
<h2 id="testname0"> Test Name 0</h2>
<p id="testexp0">Test Explanation 0</p>
</a>
</li>
<li>
<a href="#dog" onclick="datasent(2);"><img src="mcicon.png" id="listimg1" alt "Min Pin" /><span id="testscore1" class="ui-li-count">12</span>
<h1 id="testname1">Test Name 1</h1>
<p id="testexp1">Test Explanation 1</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(3);"><img src="mcicon.png" id="listimg2" alt="Gummy Bears" /><span id="testscore2" class="ui-li-count">12</span>
<h1 id="testname2"> Test Name 2 </h1>
<p id="testexp2">Test Explanation 2</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(4);"><img src="mcicon.png" id="listimg3" alt="Gummy Bears" /><span id="testscore3" class="ui-li-count">12</span>
<h1 id="testname3"> Test Name 3 </h1>
<p id="testexp3">Test Explanation 3</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(5);"><img src="mcicon.png" id="listimg4" alt="Gummy Bears" /><span id="testscore4" class="ui-li-count">12</span>
<h1 id="testname4"> Test Name 4 </h1>
<p id="testexp4">Test Explanation 4</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(6);"><img src="mcicon.png" id="listimg5" alt="Gummy Bears" /><span id="testscore5" class="ui-li-count">12</span>
<h1 id="testname5"> Test Name 5 </h1>
<p id="testexp5">Test Explanation 5</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(7);"><img src="mcicon.png" id="listimg6" alt="Gummy Bears" /><span id="testscore6" class="ui-li-count">12</span>
<h1 id="testname6"> Test Name 6 </h1>
<p id="testexp6">Test Explanation 6</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(8);"><img src="mcicon.png" id="listimg7" alt="Gummy Bears" /><span id="testscore7" class="ui-li-count">12</span>
<h1 id="testname7"> Test Name 7 </h1>
<p id="testexp7">Test Explanation 7</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(9);"><img src="mcicon.png" id="listimg8" alt="Gummy Bears" /><span id="testscore8" class="ui-li-count">12</span>
<h1 id="testname8"> Test Name 8 </h1>
<p id="testexp8">Test Explanation8</p>
</a>
</li>
<li>
<a href="#gummies" onclick="datasent(10);"><img src="write.png" id="listimg9" alt="Gummy Bears" /><span id="testscore9" class="ui-li-count">12</span>
<h1 id="testname9"> Test Name 9 </h1>
<p id="testexp9">Test Explanation 9</p>
</a>
</li>
</ul>
</article>
答案 0 :(得分：1)
下面以一个包含10个项目的列表开头。
循环遍历一个数组，该数组包含12个项目，将这些项目添加到列表中。
我已经取出了所有元素的增量ID并使用了类。
我修改了您的datasent()函数，向您展示如何使用类及所点击列表项的索引访问元素
// I dont know what is in the array you mention or how it is formed
// so ill just make one up to use here
var arr = ["worms", "Gummy Worms", "15", "Test Name", "Test Explanation" ];
var listItemsArr = [];
for(var i = 0; i < 12; i++){
listItemsArr.push(arr);
}
// `listItemsArr` is now a multidemensioanl array holding 12 of the above arrays
// Ill use this to simulate the array of 12 items you say you have
// loop through your array of 12 objects
$(listItemsArr).each(function(index, elem){
// here ill get all the values from this object in the array
// yours will depend on your array
var href = elem[0];
var altTxt = elem[1];
var count = elem[2];
var testName = elem[3];
var expln = elem[4];
// create the list item we're going to add
// again this will depend on what is in your actual array
var li = '<li>'+
'<a href="#'+href+'" ><img src="" class="listimg" alt="'+altTxt+'"/><span class="testscore ui-li-count" >'+count+'</span>'+
'<h1 class="testname">'+testName+'</h1>'+
'<p class="testexp">'+expln+'</p>'+
'</a>'+
'</li>';
$('#myList').append(li);
});
var datasent = function (listindex) {
// im not sure what your function here does
// im going to use this function to show you that you can get data
// from your elements without all the sequential ids by using classes
// this line gets an array of all the elements with the `testscore` class
// grabs the element in that array at the index passed in as `listindex`
// then gets the html from that element
var testscore = $('.testscore:eq('+listindex+')').html();
var testname = $('.testname:eq('+listindex+')').html();
var testexp = $('.testexp:eq('+listindex+')').html();
var listimgalt = $('.listimg:eq('+listindex+')').attr('alt');
var listimghref = $('#myList a:eq('+listindex+')').attr('href');
var ourInfo ='You clicked list item at index: ' + listindex+'\n'+
'This item\'s image alt text is: ' + listimgalt+'\n'+
'This item\'s link href is: ' + listimghref+'\n'+
'This item\'s testscore is: ' + testscore+'\n'+
'This item\'s testname is: ' + testname+'\n'+
'This item\'s testexp is: ' + testexp+'\n';
alert(ourInfo);
};
// attach a click handeler to all `li`s in `#myList`
$(document).on('click', '#myList li', function(){
// get the index of the clicked link
var cur = $('#myList li').index(this);
// call `datasent()` passing in our index
datasent( cur );
})img{
content:url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/unit-completed-icon.png");
width:50px;
height:50px;
}
.ui-li-count{
font-size:40px;
margin-left:20px;
}
#myList{
list-style-type: none;
}
a{
text-decoration:none !important;
color:#666666;
}
#myList li{
background-color:#ccc;
padding:20px;
width:50%;
margin-top:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
<li>
<a href="#gummies" ><img src="" class="listimg" alt="Gummy Bears"/><span class="testscore ui-li-count" >2</span>
<h1 class="testname"> Test Name </h1>
<p class="testexp">Test Explanation </p>
</a>
</li>
</ul>