Question

我只想实现一个功能，如果在输入后水果在列表中并按下＆＃34;添加＆＃34;，则可以在篮子中添加水果。我是通过使用JavaScript完成的，但是现在我需要使用jQuery库，并且在我输入文本并按下添加按钮后它被卡住了。有人可以帮忙吗？

这是我的HTML文件

<h1> Fruit shelf</h1>

<ol id="fruits"></ol>Pick a fruit:
<input type="text" id="newfruit">
<p>Your choice is: <b id='boldStuff2'></b>

<h1>Basket</h1>

<ol id="basket"></ol>
<button>add fruit</button>

以下是JavaScript

var li = ["pear", "apple", "peach", "grapes", "strawberry", "melon"];
$("button").click(function () {
    var list = $('#basket');
    var newfruit = $('#newfruit').val();
    $('#boldStuff2').html(newfruit);
    var entry = $('<li></li>');
    var len = li.length;
    for (var i = 0; i < len; i++) {
        if (li[i] == newfruit) {
            $("entry").append(document.createTextNode(newfruit));
            $("list").append(entry);
        }
    }
});

Answer 1

你的一个问题是你要声明2个jQuery对象entry和list但是当你再次尝试使用它们时，你会将它们包装在引号中，这使它们无效为选择器。

$('entry')表示不存在的tagName选择器。

这是一个使用$.inArray()来查找数组中值的稍微不相关的版本：

$("button").click(function () {
    var list = $('#basket');
    var newfruit = $('#newfruit').val();
    var isValidFruit = $.inArray(newfruit, li) > -1;
    if (isValidFruit) {
        $('#boldStuff2').html(newfruit);
        var entry = $('<li></li>').text(newfruit);
        list.append(entry);
    }else{
      alert('Not valid');  
    }
});

的 DEMO

Answer 2

我想你想这样做。

var li = ["pear", "apple", "peach", "grapes", "strawberry", "melon"];
$("button").click(function () {
    var list = $('#basket');
    var newfruit = $('#newfruit').val();
    $('#boldStuff2').html(newfruit);
    var entry = $('<li></li>');
    var len = li.length;
    /*
    if (li[i] == newfruit) {
        entry.appendChild(document.createTextNode(newfruit));
        list.appendChild(entry);
        delete li[i]
    }
    */
    $.each(li, function(i, item){
        if(item == newfruit){
            entry.append((newfruit));
            list.append(entry);
            delete li[i];
            return;
        }
    });
});

Answer 3

刚刚为您做了快速编辑看看

http://jsfiddle.net/oon7y8qo/1/

var li = ["pear", "apple", "peach", "grapes", "strawberry", "melon"];
$("#btnClick").click(function () {
    var list = $('#basket');
    var newfruit = $('#newfruit').val();
    $('#boldStuff2').text(newfruit);
    $.each(li,function(index,value){
        if(value == newfruit)
        {
            list.append("<li>"+value+"</li>");
        }
    })
});

在jQuery中添加水果到篮子里

3 个答案: