Question

我有一个网页，允许用户从下拉菜单中选择一个类别，然后输入一个输入框。当他们在输入框中按Enter键时，将创建一个列表项。

我的目标：根据他们从下拉列表中选择的类别，列表项被分配了不同的类。在CSS中，该类将具有关于定位的规范（现在，它仅具有针对每个的特定背景颜色）。最终结果是每个列表项基于用户选择的类别被分组在页面上的不同位置。（例如，类别1的所有列表项将位于页面的左下角，类别2的所有列表项将位于页面的右下角，等等...）

在JS文件中，我已经指出了我认为相关代码应该去的地方，但至于放在那里的东西，我很遗憾。

小提琴：

http://jsfiddle.net/mlynn/jyrbepyz/3/

HTML：

<section id="heady">
        <div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>

        <div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">    
                <a href="index.html">Home</a> | 
                <a href="index.html">Generic</a> |
                <a href="index.html">Elements</a> |
                <a href="index.html">Sign Up</a>
        </div>


    </section>

    <section id="wrapper">
        <br><br>
        <img src="images/blacksquare.png" width="525" height="197"></img>

        <br><br><br>


        <div>
            <div style="vertical-align:top;display:inline-block;float:left;">        
                <ul class="navbar cf">
                    <!-- <li><a href="#">item 2</a></li> -->
                    <li style="width:200px;">
                        <a href="#" class="ActiveListItem">#</a>
                        <ul>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                        </ul>
                    </li>
                </ul>
            </div>                                                               


            <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                <form action="">
                    <input type="text" id="todo" placeholder="Enter a To-do and hit enter">
                </form>
                <br>

                <!-- <ul class="active">
                    <li>Work <a href="">X</a></li>
                    <li>Sleep <a href="">X</a></li>
                    <li>Repeat <a href="">X</a></li>
                </ul> -->

            </div>



            <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                <ul class="active">
                    <li>Work <a href="">X</a></li>
                    <li>Sleep <a href="">X</a></li>
                    <li>Repeat <a href="">X</a></li>
                </ul>
            </div>

        </div>     


        <div class="Category1">
            <!--list items that user assigned "1" from dropdown menu would be placed in this div-->
        </div>

        <div class="Category2">
        </div>

        <div class="Category3">
        </div>

        <div class="Category4">
        </div>                    

        <div class="Category5">
        </div>

        <div class="Category6">
        </div>

        <div class="Category7">
        </div>


    </section>



    <section id="feety">
    I believe I exist
    </section>

CSS：

/*adder*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


 * {
    padding:0;
    margin:0;
}


html {
 background:teal;
}


body {
    /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}


a {
    color: #D9D9D9;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#222;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:teal;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}





.Category1 {
    background:blue;
}


.Category2 {
    background:green;
}

.Category3 {
    background:yellow;
}

.Category4 {
    background:orange;
}

.Category5 {
    background:purple;
}

.Category6 {
    background:gold;
}

.Category7 {
    background:maroon;
}

/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:gray;
  border-width:1px;
  width: 200px;
  border-radius: 4px;

}


.ActiveListItem:after {
    content: "\25BC\00a0\00a0";                        /*carat and spaces*/
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             /*keeps carat in center of text*/
}




ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black;
    border-style:solid;
    border-color:white;
    border-radius:4px;
    padding:3px 5px !important;
    font-weight:normal !important;
    margin-left:14px;/* got the activeitem centered with the list text this way*/
    margin-right:0px;

}

ul.navbar li {
    position: relative;
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
    color: #333;
    font-weight:900;

}

    ul.navbar li ul {
        margin-top: 1px;
        position: absolute;
        background: #222;
        font-size: 14px;
        min-width: 200px;
        display: none;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }







/*Lister*/



.container {
    width: 60%;
    margin: 0px auto;
}

form {  }

input,
ul {
    background: #eee;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-family:"Tahoma";
}

input {
    padding: 10px 10px 10px 20px;
    border: 1px solid #ccc;
}

.lister ul {
    list-style: square inside;
    padding: 10px;
}

.active { border: 1px solid #ccc; }

.inactive { display: none; }

.lister li {
    padding: 10px;
    font-weight: 600;
    color: #34495e;
}

.lister li:nth-child(odd) {
    background: #dadfe1;
    border-radius: 5px;
}

.lister li > a {
    float: right;
    text-decoration: none;
    color: #22313f;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.lister li > a:hover {
    font-size: 110%;
    color: #c0392b;
}


.lister li:before {
    content: "#";                        /*carat and spaces*/
    float:left;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             /*keeps carat in center of text*/
}

JS：

// sub menus identification
$(function() {
  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});









//newList

$(document).ready(function() {  

    var ul = $('.lister ul'),
        input = $('input');

    input.focus();  

    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();


            if (activeNumber == "1") {
                /*I guess the fantasy code goes here...?*/
            }

            ul.append('<li>' + activeNumber + ' ' +inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');
            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().remove();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });

});

小提琴：

http://jsfiddle.net/mlynn/jyrbepyz/3/

Answer 1

您可以使用类名在下拉列表li元素上设置数据属性。

<li><a href="#" data-newclass="exampleClass">1</a></li>
<li><a href="#" data-newclass="anotherClass">2</a></li>
...

将数据attrbute从li移动到.ActiveListItem：

$('.navbar ul li a').click(function() {  
    var newClass = $(this).attr('data-newclass');
    $('.ActiveListItem').attr('data-newclass', newClass);
    ...
});

在表单提交上，您将获得数据属性。像这样：

$('form').submit(function () {
    var inputVal = input.val();
    var activeNumber = $('.ActiveListItem').text();
    var newClass = $('.ActiveListItem').attr('data-newclass');
    ...
});

现在，您可以使用.addClass()将类设置为您想要的任何元素。

如何根据下拉菜单中选择的内容为li项分配不同的类？

1 个答案: