Question

我正在制作推荐列表。用户将添加推荐并从下拉列表（酒吧/餐厅等）中选择其类型。

我想添加选项以按类型对列表进行排序（从下拉列表中输入）。 我不知道该怎么做，任何建议都将受到高度赞赏。

我使用的方法可能不是最有效的，因为它可能会很复杂，所以我很乐意听到你可能有的一般说明。

提前致谢！

html代码

<!DOCTYPE html>
<html>
    <head>
        <title>Must See in NYC</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>

    <body>

    <div class="content">
        <input type="text" name="recommendation" value="Type your recommendation here">
        <select id="recommendation_Type">
            <option class="Type" value="Pub" data-sort="1">Pub</option>
            <option class="Type" value="Restaurant" data-sort="2">Restaurant</option>
            <option class="Type" value="Dessert">Dessert</option>
            <option class="Type" value="Entertainment">Entertainment</option>
        </select>
        <button class="Add">Add!</button><br/>
    </div>

    <button class="typeSort">Sort by Type</button><br/>


    <ul class="recommendations"></ul>

    <script type='text/javascript' src='script.js'></script>

    </body>
</html>

JQuery代码

$(document).ready(function() {

    var removeButton="<button class=Remove></button>";
    var ratingStar="<button class=Rating></button>"
    var ratingStars=ratingStar+ratingStar+ratingStar+ratingStar+ratingStar;
    var addToNewReco="&nbsp"+"&nbsp"+"&nbsp"+ratingStars+"&nbsp"+"&nbsp"+removeButton;


    $('input').focus(function() {
        $(this).val('');
        $(this).css("border", "1px solid black", "border-radius", "10px"); 
    });

    $('button.Add').click(function() {
        var toAdd = $("input[name=recommendation]").val();
        var recType = $("#recommendation_Type").val(); // The value of the selected option
        if (recType=="Pub") {
          $('.recommendations').append('<li>'+"&nbsp"+"&nbsp"+toAdd+addToNewReco+"</li>");
        } else if(recType=="Entertainment") {
            $('.recommendations').append('<li>'+"&nbsp"+"&nbsp"+toAdd+addToNewReco+"</li>");
        } else if(recType=="Restaurant"){
            $('.recommendations').append('<li>'+"&nbsp"+"&nbsp"+toAdd+addToNewReco+"</li>");
        } else if(recType=="Dessert"){
            $('.recommendations').append('<li>'+"&nbsp"+"&nbsp"+toAdd+addToNewReco+"</li>");
        };
        $('input').val('Type your recommendation here');
    });

    $('ul').on('click','button.Remove', function(){
        $(this).parent().fadeOut();
    });

    $('ul').on('click','button.Rating', function(){
        $(this).toggleClass('Rated');
        $(this).prevAll().toggleClass('Rated');
    });

});

JQuery / JS / HTML - 根据用户选择的输入

0 个答案: