Question

我正在从codeacademy开始基本的JQuery练习，我正在尝试创建一个基本的书签管理器。唯一的问题是我添加到实际书签栏的文本不包含链接。不知何故，链接在文本上方。这是我的JQuery代码。

$(document).ready(function() {

// your code here

$('#add').click(function() {
    var toAdd = $('input[name=site]').val();
    var toAdd2 = $('input[name=link]').val();
    $('.websites ol').append("<li><a href="+ toAdd2 + ">" + toAdd + "</a></li>");
    $('.websites').height("+=40px");
});
$('#remove').click(function() {
    $('.websites').effect('explode');
});
$(document).on('click', '.websites p', function(){
    $(this).remove();
    $('.websites').height("-=40px");
});
$('#fav').draggable();
$('ol').sortable();

});

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script type='text/javascript' src='script.js'></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <title>Bookmarks Manager</title>
</head>
<body>
    <div id="fav">Bookmarks</div>
    <div class="websites">
    <ol>
        <li><a href="http://www.celticsblog.com/">CelticsBlog</a></li>
        <li><a href="http://www.ign.com/">IGN</a></li>
        <li><a href="http://www.cnn.com/">CNN</a></li>
        </ol>
    </div>
    <div id="form"><form>
    Website Name: <input type="text" name="site"/>
    </form>
    <form>Address: <input type="text" name="link"/></form>
    <button id="add">Add</button>
    <button id="remove">Clear</button>
    </div>

    <p>To remove a single item, simply click on the website name. You can also organize your bookmarks by moving the website names around. For a fun effect, click the Clear button!</p>
</body>

JQuery书签管理器

0 个答案: