在不同的选择中使用相同的javascript函数

时间：2015-05-12 17:13:54

标签： javascript html

我需要在3个单独的选择中使用名为Cerca2的相同JavaScript函数。第一个可以工作，但其他人没有。我试图自己解决这个问题，但我找不到它的位置。

编辑：代码编辑，现在工作完美，tnx所有的建议和支持人^^ 这是html：

  <body>

  Ricerca per Nome: <input type="text" maxlength="20"/>
  <input id="cerca1" type="button" value="Cerca" /><br/><br/>

Ricerca personaggi per Fazione:
<select id="factionSelect">
    <option>UNSC</option>
    <option>Covenant</option>
    <option>Flood</option>
    <option>Precursori</option>
</select>&nbsp;&nbsp;<input id="cerca2" selectid="factionSelect" type="button" value="Cerca"/>

<br/><br/>

Ricerca armi per tipo:
<select id="weaponSelect">
    <option>cinetiche</option>
    <option>plasma</option>
    <option>energia</option>
</select>&nbsp;&nbsp;<input id="cerca5" selectid="weaponSelect" type="button" value="Cerca"/>

<br/><br/>

Ricerca Veicoli per impiego:
<select id="vehicleSelect">
    <option>terrestri</option>
    <option>volanti</option>
    <option>Astronavi</option>
</select>&nbsp;&nbsp;<input id="cerca6" selectid="vehicleSelect" type="button" value="Cerca"/>

  <input id="cerca3" type="button" value="Mostra tutto"/>
  <input id="cerca4" type="button" value="Ricerca casuale"/><br/><br/>

  <hr id="barra"/><br/><p>Risultati ricerca:</p>

  <div id="risultati">
  <ol id="ricerca">
  <li class="vuoto"></li>
  </ol>

  </div>
</body>

这是JavaScript：

function Profilo(nom, appar, prof, grup, img){

    this.nome = nom;
    this.apparizione = appar;
    this.profilo = prof;
    this.gruppo = grup;
    this.immagine = img;
}


function Archivio(){

    this.lista = [];

    this.inizializza = function(nodo){
        var schede = nodo.getElementsByTagName("scheda");

        for(var i = 0; i<schede.length; i++){

            var categoria = schede[i].getAttribute("categoria");
            var nomi = schede[i].getElementsByTagName("nome");
            var nome = nomi[0].firstChild.nodeValue;
            var apparizioni = schede[i].getElementsByTagName("apparizione");
            var apparizione = apparizioni[0].firstChild.nodeValue;
            var profili = schede[i].getElementsByTagName("profilo");
            var profilo = profili[0].firstChild.nodeValue;  
            var immagini = schede[i].getElementsByTagName("immagine");
            var immagine =  immagini[0].firstChild.nodeValue;

            var scheda = new Profilo(nome, apparizione, profilo, categoria,immagine);
            this.lista.push(scheda);
        }
    }

    this.cerca1 = function(testo){
        var risultato = [];
        var trovato = 0;
        var i = 0;

        while(i<this.lista.length && trovato == 0){
            if(this.lista[i].nome == testo)
            {
                trovato = 1;
                risultato.push(this.lista[i]);
            }
            else
                i++;
        }

        if(trovato == 1)
            return risultato;
        else
        {
            risultato[0] = null;
            return risultato;
        }
    }

    this.cerca2 = function(testo){
        var risultati = [];

        for(var i = 0; i<this.lista.length; i++){
            if(this.lista[i].gruppo == testo)
                risultati.push(this.lista[i]);
        }
        return risultati;
    }



    this.cerca3 = function(numero){
        var risultati = [];

        risultati.push(this.lista[numero]);

        return risultati;
    }

    this.genera = function(valori){  // genera la lista con gli elementi di xml
        var s = "";

        if(valori[0] == null)
            s = "Nessun risultato";
        else{   
            for(var i = 0; i<valori.length; i++)
                s = s + '<li><span class="trovato" onclick="mostra(this);">' + valori[i].nome + "  " + '</span><br/><ol class="nascosto"><li class="nopallino2"> <img src='+ valori[i].immagine+'> <br/><br/>Profilo: '+ valori[i].profilo +'<br/>Apparizione: ' + valori[i].apparizione +'</li></ol></li><br/><br/>';
        } 
        return s;   
    }

    this.nascondi = function(){
        var liste = document.getElementsByTagName("ol");

        for(var i = 0; i<liste.length; i++){
            if(liste[i].className == "nascosto")
                liste[i].style.display = "none";
        }
    }
}

function cercagruppo(){

    /*var elenco = document.getElementById("ricerca");
    var menu = document.getElementsByTagName("select");

    var scelta = menu[0];
    var gruppo = scelta.value;
    var schede = contenitore.cerca2(gruppo);
    elenco.innerHTML = contenitore.genera(schede);
    contenitore.nascondi(); */


    var elenco = document.getElementById("ricerca");
    var menu = document.getElementById(this.getAttribute("selectid"));
    var group = menu.value;
    var schede = contenitore.cerca2(group);
    elenco.innerHTML = contenitore.genera(schede);
    contenitore.nascondi();


}


function mostra(nome){

    var testo = nome.nextSibling.nextSibling;

    if(testo.style.display == "none")
        testo.style.display = "block"

    else
        testo.style.display = "none"
}

// funzione che cerca le schede relative all'oggetto cercato digitando il nome
function cercanome(){

    var casella = document.getElementsByTagName("input");
    var nome;
    var elenco = document.getElementById("ricerca");
    var scheda;

    nome = casella[0].value;

    scheda = contenitore.cerca1(nome);

    elenco.innerHTML = contenitore.genera(scheda);

    contenitore.nascondi();
}

// funzione per mostrare tutte le schede
function tutto(){

    var elenco = document.getElementById("ricerca");

    elenco.innerHTML = contenitore.genera(contenitore.lista);

    contenitore.nascondi(); 
}


function generaCasuale(){

    var numerogenerato = Math.floor(Math.random()*(parseInt(contenitore.lista.length-1)+1));

    if(numerogenerato == randomglobale){
        while(numerogenerato == randomglobale)
            numerogenerato = Math.floor(Math.random()*(parseInt(contenitore.lista.length-1)+1));
    }

    randomglobale = numerogenerato;
    return numerogenerato;
}

// funzione di ricerca casuale 
function casuale(){

    var elenco = document.getElementById("ricerca");
    var numero = generaCasuale();
    var scheda = contenitore.cerca3(numero);

    elenco.innerHTML = contenitore.genera(scheda);

    contenitore.nascondi();
}


var contenitore = new Archivio();
var randomglobale;

function inizializza(){

    var c1 = document.getElementById("cerca1");
    var c2 = document.getElementById("cerca2");
    var c3 = document.getElementById("cerca3");
    var c4 = document.getElementById("cerca4");
    var c5 = document.getElementById("cerca5");
    var c6 = document.getElementById("cerca6");


    c1.onclick = cercanome;
    c2.onclick = cercagruppo;
    c3.onclick = tutto;
    c4.onclick = casuale;
    c5.onclick = cercagruppo;
    c6.onclick = cercagruppo;


    var nodo = caricaXML("elenco.xml");
    contenitore.inizializza(nodo);
}

window.onload = inizializza;

2 个答案:

答案 0 :(得分：1)

我不确定我完全理解这个问题，但是在这段代码中，c5和c6都获得了cerca2输入：

var c1 = document.getElementById("cerca1");
var c2 = document.getElementById("cerca2");
var c3 = document.getElementById("cerca3");
var c4 = document.getElementById("cerca4");
var c5 = document.getElementById("cerca2");
var c6 = document.getElementById("cerca2");

答案 1 :(得分：1)

在代码的几个部分中，您选择某种类型的所有元素，但只使用第一个这样的元素。

例如：

function cercagruppo(){
    ...
    var menu = document.getElementsByTagName("select"); // gets all "select" elements
    var scelta = menu[0]; // gets value of first "select" element
    ...
}

还有：

function cercanome(){
    var casella = document.getElementsByTagName("input"); // gets all "input" elements
    ...
    nome = casella[0].value; // gets value of first "input" element
    ...
}

如果您想获取所有select和input元素的值，您需要明确地这样做，例如循环遍历menu和{{1} }数组，而不是只选择他们的第一个项目。

编辑：重构代码的建议方法

稍微查看了一下你的代码，这是我认为你应该采取的方法：

  1. 在您的HTML中，为每个casella元素添加ID属性。
  2. 为“cerca2”，“cerca5”和“cerca6”输入按钮添加一个属性，指示相应select元素的ID
  3. 然后，您可以访问select函数中的属性，并使用它来选择相应的cercagruppo()元素。

    4. 您的select功能看起来更像是这样：

    cercagruppo()

    您的HTML最终会看起来更像这样：

    function cercagruppo(){
    var ol = document.getElementById("ricerca");
    var selection = document.getElementById(this.getAttribute("selectid"));
    var group = selection.value;
    var tabs = contenitore.cerca2(group);
    ol.innerHTML = contenitore.genera(tabs);
    contenitore.nascondi();
}

    修改编辑

    当然，您还应该修复@mgarant指出的错误：

    Ricerca personaggi per Fazione:
<select id="factionSelect">
    <option>UNSC</option>
    <option>Covenant</option>
    <option>Flood</option>
    <option>Precursori</option>
</select>&nbsp;&nbsp;<input id="cerca2" selectid="factionSelect" type="button" value="Cerca"/>
<br/><br/>
Ricerca armi per tipo:
<select id="weaponSelect">
    <option>cinetiche</option>
    <option>plasma</option>
    <option>energia</option>
</select>&nbsp;&nbsp;<input id="cerca5" selectid="weaponSelect" type="button" value="Cerca"/>
<br/><br/>
Ricerca Veicoli per impiego:
<select id="vehicleSelect">
    <option>terrestri</option>
    <option>volanti</option>
    <option>Astronavi</option>
</select>&nbsp;&nbsp;<input id="cerca6" selectid="vehicleSelect" type="button" value="Cerca"/>
相关问题
最新问题