Question

我正在尝试将此javascript DOM转换为jquery，并且我的代码由于某种原因未运行。这是我正在使用的DOM。

document.getElementById("forma").onsubmit = function () {


  var ime = document.getElementById("ime").value;
    var priimek = document.getElementById("priimek").value;
    var stranka = document.getElementById("stranka").value;

    try {
        var kandidat = Kandidat(ime, priimek, stranka);
        DodajKandidataNaPolje(kandidat);
        document.getElementById("seznam").innerHTML = OblikujIzpis(PridobiPolje()); 
        document.getElementById("obvestila").innerHTML = "Uspešen Vnos!";
        document.getElementById("obvestila").className = "bg-success";
    }
    catch (napaka) {
        document.getElementById("obvestila").innerHTML = napaka.message;
        document.getElementById("obvestila").className = "bg-danger";
    }

    document.getElementById("forma").reset();    
}

document.getElementById("forma_isci").onsubmit = function () {
    var iskani_niz = document.getElementById("iskalniNiz").value;
    document.getElementById("seznam").innerHTML = OblikujIzpis(Isci(iskani_niz));
    document.getElementById("obvestila").innerHTML = "Rezultat iskanja po iskalnem nizu " + iskani_niz;
    document.getElementById("obvestila").className = "bg-info";
}

document.getElementById("pobrisi").onclick = function () {
    IzbrisiPolje();
    document.getElementById("obvestila").innerHTML = "Polje je bilo izbrisano!";
    document.getElementById("obvestila").className = "bg-success";
    document.getElementById("seznam").innerHTML = "";
    document.getElementById("forma").reset();
}

这是我在jquery中写的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("forma").submit(function(){
        var ime=$("ime").val();
        var priimek=$("priimek").val();
        var stranka=$("stranka").val();
        try{
        var kandidat= Kandidat(ime, priimek, stranka);
        DodajKandidataNaPolje(kandidat);
        $("seznam").html(OblikujIzpis(PridobiPolje());
        $("obvestila").html("Uspešen Vnos!");
        $("obvestila").addClass("bg-success");
    }
    catch(napaka){
        $("obvestila").html(napaka.message);
        $("obvestila").addClass("bg-danger");

    }

    $("forma").reset();

    $("forma_isci").submit=function(){
        var iskani_niz=$("iskaniNiz").val();
        $("seznam").html(OblikujIzpis(iskani_niz));
        $("obvestila").html("Rezultat iskanja po iskalnem nizu " + iskani_niz);
        $("obvestila").addClass("bg-info");
    }
    $("pobrisi".click=function(){
        IzbrisiPolje();
        $("obvestila").html("Polje je bilo izbrisano!");
        $("obvestila").addClass("bg-success");
        $("seznam").html("");
        $("forma").reset();
    }
    }
    });
});
</script>

这是我的HTML文件

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">    
    <script src="funkcije.js"></script>
    <script src="dom.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>JavaScript - DOM</title>
  </head>
  <body>

    <div class="container">
      <h1>Seznam predsedniških kandidatov!</h1>

      <form action="#" id="forma_isci" class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" id="iskalniNiz" placeholder="Iskalni niz">
        </div>
        <button type="submit" class="btn btn-info">Išči</button>
      </form>

      <br />
      <br />
      <h3>Vnos novih kandidatov</h3>
      <form action="#" id="forma" class="form-group">
        <table class="table">
          <tr>
            <td>Ime:</td>
            <td>
              <input type="text" id="ime" placeholder="Ime kandidata" class="form-control"  /> 
            </td>
          </tr>
          <tr>
            <td>Priimek:</td>
            <td>
              <input type="text" id="priimek" placeholder="Priimek kandidata" class="form-control"  /> 
            </td>
          </tr>
          <tr>
            <td>Stranka:</td>
            <td>
              <select id="stranka" class="form-control" >
                <option>Demokratska</option>
                <option>Republikanska</option>
                <option>Neodvisna</option>              
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <input type="submit" value="Dodaj" class="btn btn-info" />
            </td>
            <td>
              <input type="reset" value="Ponastavi" class="btn btn-info"  />
            </td>
          </tr>
        </table>
      </form>

      <br />
      <br />
      <p id="obvestila"></p>

      <br />
      <br />
      <h3>Seznam obstoječih kandidatov</h3>
      <ul id="seznam" class="list"></ul>
      <button class="btn" id="pobrisi">Pobriši seznam</button>
    </div>


  </body>
</html>

所以无论如何，我不打算在这里发布这些功能，因为这里不需要它们。

javascript代码有效，网站正常工作，元素正常添加。但我希望有相同的效果，但用Jquery编写。我认为一些问题是在.className中，我用jquery和.innerHTML替换了.Addclass，我写了.html（函数）。如果有人能为我转换它会很棒，因为我对jquery有点新意我有一些问题。

更新n1 *

将Jquery更改为此

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
$(document).ready(function(){
    $("#forma").submit(function(){
        var ime=$("#ime").val();
        var priimek=$("#priimek").val();
        var stranka=$("#stranka").val();
        try{
        var kandidat= Kandidat(ime, priimek, stranka);
        DodajKandidataNaPolje(kandidat);
        $("#seznam").html(OblikujIzpis(PridobiPolje());
        $("#obvestila").html("Uspešen Vnos!");
        $("#obvestila").myClass("bg-success");
    }
    catch(napaka){
        $("#obvestila").html(napaka.message);
        $("#obvestila").myClass("bg-danger");

    }

    $("#forma").reset();
}
    $("#forma_isci").submit=function(){
        var iskani_niz=$("#iskaniNiz").val();
        $("#seznam").html(OblikujIzpis(iskani_niz));
        $("#obvestila").html("Rezultat iskanja po iskalnem nizu " + iskani_niz);
        $("#obvestila").myClass("bg-info");
    }
    $("#pobrisi".click=function(){
        IzbrisiPolje();
        $("#obvestila").html("Polje je bilo izbrisano!");
        $("#obvestila").myClass("bg-success");
        $("#seznam").html("");
        $("#forma").reset();
    }
    }
    });
});
</script>

添加＃，其中有一个ID，并将.addClass更改为.myClass。添加功能仍然无法正常工作。但其他一些功能正在发挥作用。

功能。

var polje = [];

function Kandidat(ime, priimek, stranka) {
    if (ime ==="" || priimek === "") {
        throw new Error("Podatki niso popolni!");
    }
    else {
        var id = polje.length + 1;
        var oseba = {id:id, ime:ime, priimek:priimek, stranka:stranka};
        oseba.Izpis = function () {
        return "(" + this.id + ")" + this.ime + " " + this.priimek + " pripada stranki " + this.stranka;
    }
    return oseba;
    }


}

function DodajKandidataNaPolje(kandidat) {
    polje.push(kandidat);
    return true;
}

function PridobiPolje() {
    return polje;
}

function OblikujIzpis(polje) {
    var izpis = "";
    for (var i = 0; i < polje.length; i++) {
        izpis = izpis + "<li>" + polje[i].Izpis() + "</li>";
    }
    return izpis;
}

function Isci(iskalniNiz) {
    var rezultat = [];
    var oseba;
    var vsebuje;

    for (var i = 0; i < polje.length; i++) {
        oseba = polje[i];
        vsebuje = oseba.ime.search(iskalniNiz);
        if (vsebuje != -1) {
            rezultat.push(oseba);
        }
        else{
            vsebuje = oseba.priimek.search(iskalniNiz);
            if (vsebuje != -1) {
                rezultat.push(oseba);
            }
            else{
                vsebuje = oseba.stranka.search(iskalniNiz);
                if (vsebuje != -1) {
                    rezultat.push(oseba);
                }
            }
        }
    }

    return rezultat;
}

function IzbrisiPolje() {
    polje = [];
    return true;
}

Answer 1

在jQuery中，为了访问元素，您需要使用选择器。在您的情况下，表单的id为forma（在jQuery选择器中，您使用＃作为前缀）。要访问您的表单，您需要执行以下操作：

改变这个：

$("forma").submit(function(){

到此：

$("#forma").submit(function(){

您使用jQuery访问代码中元素的任何其他地方也必须进行更改。使用#myid表示ids，.myclass表示类。有关详细信息，请参阅this。

以下是您的代码（仅限jQuery部分），修复了一些内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var forma = $('#forma');

    forma.submit(function(){
        var ime=$("#ime").val();
        var priimek=$("#priimek").val();
        var stranka=$("#stranka").val();
        try{
            var kandidat= Kandidat(ime, priimek, stranka);
            DodajKandidataNaPolje(kandidat);
            $("#seznam").html(OblikujIzpis(PridobiPolje());
            $("#obvestila").html("Uspešen Vnos!");
            $("#obvestila").addClass("bg-success");
        } catch(napaka){
            $("#obvestila").html(napaka.message);
            $("#obvestila").addClass("bg-danger");

        }

        forma[0].reset();
    });

    $("#forma_isci").submit(function(){
        var iskani_niz=$("#iskaniNiz").val();
        $("#seznam").html(OblikujIzpis(iskani_niz));
        $("#obvestila").html("Rezultat iskanja po iskalnem nizu " + iskani_niz);
        $("#obvestila").addClass("bg-info");
    });

    $("#pobrisi").click(function( ){
        IzbrisiPolje();
        $("#obvestila").html("Polje je bilo izbrisano!");
        $("#obvestila").addClass("bg-success");
        $("#seznam").html("");
        forma[0].reset();
    });
});
</script>

Javascript转换为jquery

1 个答案: