按关键字排序

到目前为止，我有一组在两个不同页面上来回切换的图片。现在，我希望能够按关键字进行排序。我希望能够仅带有以字母A开头的项目的页面，或者仅带有仅与运动相关的图片，仅限水果等的组合。如果有人能够指引我以正确的方向开始，我将很感激它。由于按关键字排序

http://readautism.atwebpages.com/ http://readautism.atwebpages.com/index1.html

<!doctype html> 
<html> 
<head> 
<meta charset="ISO-8859-1" /> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 
<title>Example of How to Play a Sound on Click or on MouseOver</title> 


<script> 
var gStorage = {}; 

function toggle(anImage, anAltSrcArr) { 
    if (typeof(anImage) === "undefined" || typeof(anAltSrcArr) === "undefined" || anAltSrcArr.length === 0) { 
     return; 
    } 

    var id = anImage.id; 
    var oldSrc = anImage.src; 

    if (typeof(gStorage[id]) === "undefined") { 
     gStorage[id] = { 
      'id': id, 
      'origSrc': oldSrc, 
      'i': 0 
     }; 
    } 

    gStorage[id].i += 1; 
    if (gStorage[id].i > anAltSrcArr.length) { 
     gStorage[id].i = 0; 
    } 

    if (gStorage[id].i === 0) { 
     anImage.src = gStorage[id].origSrc; 
    } else { 
     anImage.src = anAltSrcArr[gStorage[id].i - 1]; 
    } 
} 
</script> 
<script> 
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: 
    "mp3": "audio/mpeg", 
    "mp4": "audio/mp4", 
    "ogg": "audio/ogg", 
    "wav": "audio/wav" 
} 

function createsoundbite(sound){ 
    var html5audio=document.createElement('audio') 
    if (html5audio.canPlayType){ //check support for HTML5 audio 
     for (var i=0; i<arguments.length; i++){ 
      var sourceel=document.createElement('source') 
      sourceel.setAttribute('src', arguments[i]) 
      if (arguments[i].match(/\.(\w+)$/i)) 
       sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) 
      html5audio.appendChild(sourceel) 
     } 
     html5audio.load() 
     html5audio.playclip=function(){ 
      html5audio.pause() 
      html5audio.currentTime=0 
      html5audio.play() 
     } 
     return html5audio 
    } 
    else{ 
     return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} 
    } 
} 

//Initialize two sound clips with 1 fallback file each: 

var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3") 
var clicksound=createsoundbite('http://static.sfdict.com/staticrep/dictaudio/P05/P0501900.mp3', "whistle.ogg") 
var uniquevar1=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/B01/B0147400.mp3") 
var uniquevar2=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/R01/R0153700.mp3") 
var uniquevar3=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/B01/B0130100.mp3") 
var uniquevar4=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/C02/C0298100.mp3") 
var uniquevar5=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/C08/C0897400.mp3") 
var uniquevar6=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/H00/H0020400.mp3") 
var uniquevar7=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/H01/H0110100.mp3") 
var uniquevar8=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/C05/C0578600.mp3") 
var uniquevar9=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/S05/S0555400.mp3") 
var uniquevar10=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/R04/R0433000.mp3") 
var uniquevar11=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/T01/T0107200.mp3") 
var uniquevar12=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/P02/P0230400.mp3") 
var uniquevar13=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/N02/N0227500.mp3") 
var uniquevar14=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/L00/L0050400.mp3") 
var uniquevar15=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/S04/S0462700.mp3") 

</script> 

</head> 
<body 
<p><CENTER><FONT SIZE = 4>DIRECTIONS: CLICK A PICTURE TO SEE WORD, THEN CLICK WORD TO SEE PICTURE AGAIN.</FONT> 

<img class="with-action" id="image1" name="image1" src="bat.jpg" onclick="uniquevar1.playclip();toggle(this, ['bat1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:70px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image2" name="image2" src="refrigerator.jpg" onclick="uniquevar2.playclip();toggle(this, ['refrigerator1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:370px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image3" name="image3" src="baseball.jpg" onclick="uniquevar3.playclip();toggle(this, ['baseball1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:670px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image4" name="image4" src="chair.jpg" onclick="uniquevar4.playclip();toggle(this, ['chair1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:970px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image5" name="image5" src="couch.jpg" onclick="uniquevar5.playclip();toggle(this, ['couch1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:1270px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image6" name="image6" src="hair.jpg" onclick="uniquevar6.playclip();toggle(this, ['hair1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:70px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image7" name="image7" src="hat.jpg" onclick="uniquevar7.playclip();toggle(this, ['hat1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:370px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image8" name="image8" src="clown.jpg" onclick="uniquevar8.playclip();toggle(this, ['clown1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:670px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image9" name="image9" src="sink.jpg" onclick="uniquevar9.playclip();toggle(this, ['sink1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:970px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image10" name="image10" src="rug.jpg" onclick="uniquevar10.playclip();toggle(this, ['rug1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:1270px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image11" name="image11" src="teeth.jpg" onclick="uniquevar11.playclip();toggle(this, ['teeth1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:70px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image12" name="image12" src="pencil.jpg" onclick="uniquevar12.playclip();toggle(this, ['pencil1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:370px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image13" name="image13" src="nose.jpg" onclick="uniquevar13.playclip();toggle(this, ['nose1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:670px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image14" name="image14" src="lamp.jpg" onclick="uniquevar14.playclip();toggle(this, ['lamp1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:970px; WIDTH:175px; HEIGHT:175px"/> 
<img class="with-action" id="image15" name="image15" src="shoe.jpg" onclick="uniquevar15.playclip();toggle(this, ['shoe1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:1270px; WIDTH:175px; HEIGHT:175px"/> 

</p></CENTER> 
</body> 
</html>

来源

2014-12-27 user3444610

这里有三个功能：

选择按关键字
选择喜欢的第一个字母
选择类似的图片

您在寻找这些功能吗？

var pics = [ 
 
    {id:0, name: 'Pineapple', tags: ["sport", "food"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
    {id:1, name: 'Venus', tags: ["sport", "planet"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
    {id:2, name: 'Jupiyer', tags: ["water", "food"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
    {id:3, name: 'Baseball', tags: ["color", "food"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
    {id:4, name: 'Apple', tags: ["car", "planet"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
    {id:5, name: 'Cloud', tags: ["plant", "sport"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
    {id:6, name: 'Computer', tags: ["tree", "fruit", "stone"], audio:'B01/B0147400.mp3', img:'chair1.jpg'}, 
 
]; 
 
    
 
function select(keyword) { 
 
    return pics.filter(function(p){ 
 
     return (p.tags && p.tags.indexOf(keyword)>-1); 
 
    }); 
 
} 
 

 
function selectLike(pic) { 
 
    var res = {};   
 
    for(var i=0; i<pics.length;i++) { 
 
     select(pic.tags[i]).forEach(function(simpic){ 
 
      res[simpic.id] = true; 
 
     }); 
 
    }; 
 
    delete res[pic.id]; 
 
    return Object.keys(res).map(function(key){ return pics[key] }); 
 
} 
 

 

 
function selectByLetter(letter) { 
 
    return pics.filter(function(p){ 
 
     return (p.name[0].toUpperCase() == letter.toUpperCase()); 
 
    }); 
 
}; 
 

 
function prepareAudioClips() { 
 
    pics.forEach(function(p){ 
 
     p.clip = createsoundbite("http://static.sfdict.com/staticrep/dictaudio/"+p.audio) 
 
    }); 
 
} 
 

 
// This is like a sceleton of the function 
 
function generateHTMLforSimilar(arr) { 
 
    s = ''; 
 
    for(var i=0;i<arr.length;i++) { 
 
     s += '<img class="with-action" id="'+arr[i].name+'" name="'+arr[i].name+'" src="'+arr[i].img+'" onclick="pics[arr.id].clip.playclip();toggle(this, [\"'+arr[i].img+'\"])" STYLE="position:absolute; float:left; WIDTH:175px; HEIGHT:175px"/>'; 
 
    } 
 
    return s; 
 
} 
 

 
    
 
document.write("<b>Like keyword:</b> ", JSON.stringify(select("food")) ,'<br/>'); 
 
document.write("<b>Like letter:</b> ", JSON.stringify(selectByLetter("A")) ,'<br/>'); 
 
document.write("<b>Like picture:</b> ", JSON.stringify(selectLike(pics[0])) ,'<br/>'); 
 

 
// prepareAudioClips(); // This wont work at SO without resource files 
 
document.write("<b>HTML:</b> ", generateHTMLforSimilar(selectLike(pics[0])) ,'<br/>');

来源

2014-12-27 18:19:58 agershun

你知道还有什么我将不得不除了你的代码添加到得到这个工作？我几乎是一个新手。 – user3444610 2014-12-27 20:19:51

不幸的是，这是一个很长的故事......我会从以下开始：1.使用所有参数（包括图片名称，音频片段源文件）扩展'图片'对象数组。 2.编写HTML生成过程，它可以生成HTML代码，将所有图片（包含所有属性）放置在屏幕上。 3.添加dblclick（）函数以搜索所有相关图片并将其重新排列在屏幕上。我会在代码中添加几行以解释这个想法。 – agershun 2014-12-28 02:21:42

按关键字排序

回答

相关问题