如何根据所点击的内容使此代码的行为不同？

时间：2015-05-14 18:36:10

标签： javascript jquery html css

首先，如果这段代码混乱，我道歉。我试过大幅削减它。 http://jsfiddle.net/neowot/7hLrLdn2/14/

我在JS代码中写了评论，显示了我在这个问题上提到的相关领域。请参阅＆＃34;相关章节＆＃34;和＆＃34;其他相关部分＆＃34;。

基本上，当您在输入框中输入并按Enter键时，会出现一个列表项。在列表项上，您可以点击“＆＃39; X＆＃39;删除该列表项。但是，还有一个＆＃39; O＆＃39;左边的按钮。我希望它具有与X按钮不同的功能。

然而，该代码基本上表示＆＃34;采取包含在＆＃39; a＆＃39;标签，当点击它时，删除列表项＆＃34;，所以我希望能够做的是区分代码中的两个。我发现唯一有效的方法是将O包裹在一个随机的＆＃39; d＆＃39;而不是标记（我甚至不知道那是什么）并适当地更改代码，但显然这看起来像是无意义的代码和不良实践。

如何点击＆＃39; O＆＃39;与点击＆＃39; X＆＃39;不同的功能。在列表项上？

HTML 

  <body>
       <div class="UpCenter">             
                <div id="navbarcontainer">        
                    <ul class="navbar cf">
                        <li>
                            <a href="#" class="ActiveListItem">Music</a>
                            <ul>
                                <li><a href="#">Music</a></li>
                                <li><a href="#">Movie</a></li>
                                <li><a href="#">Book</a></li>

                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="lister" id="interestboxcontainer">
                    <form action="">
                        <input type="text" class="clearable" placeholder="type here" autocomplete="off">
                    </form>
                </div>


            </div>



                <div id="DownCenter">



                <div id="LeftPanel"> 

                    <div id="MusicDiv" class="UserCategories">
                        Your Music
                        <div class="lister">
                            <ul class="active" style="min-width:365px;">
                                <!--
                                <li>1<a href="">X</a></li>
                                -->
                            </ul>
                        </div>       
                    </div>

                    <div id="MovieDiv" class="UserCategories">
                         Your Movies
                         <div class="lister">
                            <ul class="active" style="min-width:365px;">
                                <!--
                                <li>1<a href="">X</a></li>
                                -->
                            </ul>
                         </div>     
                    </div>                

                    <div id="BookDiv" class="UserCategories">
                         Your Books
                         <div class="lister">
                            <ul class="active" style="min-width:365px;">
                                <!--
                                <li>1<a href="">X</a></li>
                                -->
                            </ul>
                         </div>               
                    </div>





                </div> 






                <div id="RightPanel"> 
                    <div id="SideBarSearchDiv">

                    </div>

                    <div id="SearchDiv">                    
                        <div id="GenreMusicDiv" class="GenreCategories">
                            Genre
                            <div class="GenreMusicList">
                                Bands
                            </div>    
                        </div>

                        <div id="GenreMovieDiv" class="GenreCategories">
                            Genre
                            <div class="GenreMovieList">
                                Movies
                            </div>                       
                        </div>

                        <div id="GenreBookDiv" class="GenreCategories">
                            Genre
                            <div class="GenreBookList">
                                Books
                            </div>                       
                        </div>

                    </div>       
                </div>
           </div>

       </div>

CSS 

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


* {
    padding:0;
    margin:0;
}


html {
 background:#1e1e1e;                                
}


body {
    background-color:#FFFFFF;
}



#wrapper {
    text-align: center;
    width:1500px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#navbarcontainer{
    vertical-align:top;
    display:inline-block;   
}

#interestboxcontainer{
    display:inline-block;
    vertical-align:top;
    padding:0px 0px 0px 10px;
}



.UpCenter{
    padding-top:30px;
    height:90px;
}


#DownCenter{
    color:white;
    width:1120px;
    margin-left:auto;
    margin-right:auto;
    background-color:none;
}


#LeftPanel{                        /*Left Panel*/
    position:absolute;
    vertical-align:top;  
    margin-bottom:50px;
    height:600px; 
    background-color:#343434;
    width:365px;
    padding-top:12px;
    padding-left:12px;
    padding-right:12px;
    border-top-left-radius:15px;
    border-bottom-left-radius:15px;
}

#RightPanel{
    vertical-align:top;

    height:100%;
}

#SearchDiv{                        /*Right Panel*/
    background-color:#343434;
    width:365px;
    height:600px;
    margin-bottom:50px; 
    margin-left:389px;
    text-align:center;
    padding-top:12px;
    padding-left:12px;
    padding-right:12px;
    border-left-style:solid;
    border-left-width:1px;
    border-left-color:#484848;
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;

}


.UserCategories{
    display:none;
    margin-bottom:30px;
    background:red;
}

#MusicDiv{

}

#MovieDiv{

}

#BookDiv{

}



.GenreCategories{
    display:none;
    margin-bottom:30px;
    background:orange;
}

#GenreMusicDiv{

}

#GenreMovieDiv{ 

}

#GenreBookDiv{   

}



/* navbar */
ul.navbar {
  border-style:solid;
  border-width:1px; 
  border-color:#739FE0;
  width: 100px;                
  border-radius: 4px;
  font-size:14px;
  height:33px;
}

ul.navbar li a.ActiveListItem {
    background:url(../images/downarrowblue.png) !important; 
    background-repeat: no-repeat !important;
    background-size: 10px 10px !important;
    background-position: 83px 13px !important;
    color:white; !important;
    background-color:#222 !important;
    padding:7.5px 0px !important; 
    font-weight:normal !important;
    border-radius: 4px;
    height:18px;
    width:100px;   
    margin-bottom:1px;
}

ul.navbar li {    
    z-index:100;
    position: relative;
    width:100px;                        
}

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

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#739FE0;
    color:pink;  
}

ul.navbar li ul {
        margin-top: 0px;               
        background: #222;
        font-size: 14px;
        display: none;
        z-index: 50;

}

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

.hidden { display: none; }


/*Lister*/
form {  }

.lister input {
    width:235px;   
    height:33px;
    padding-left:10px;
    padding-right:10px;
    float:left;
    margin-bottom:20px;
    font-size:14px;
    font-family:"Tahoma";
    background-color:#222;
    color:white;
}

.lister input:focus {
    outline:none;
}

.lister ul {
    background:none;
    font-family:"Tahoma";
}

.active { 
    text-align:center;
}                                       

.inactive { display: none;}

.lister li {    
    font-size:14px; 
    color: #000000;   
    display:inline-block; 
    padding:3px; 
    margin-bottom:1px;
}

.lister li:nth-child(odd) {
    background: blue;           
    border-color:#ccc;
    color:#ccc;    
}

.lister li:nth-child(even) {
    background: blue;           
    border-color:#ccc;
    color:#ccc;
}

.lister li > a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    margin-top:2px;
    display:inline-block;
}

.lister li > a:hover {
    /*font-size: 105%;*/
    /*color: #c0392b;*/
    color:#000000;

}

.lister li > span {
    display:inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width:379px;
}

JS 

$(function() {

    var container = $('.navbar');


  $('.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);
  });


 $(document).mouseup(function (e)
    {
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.navbar li ul').slideUp(300);
    }
     });
});





$(document).ready(function() {

    function setMusicHeight(){  
        $('#GenreMusicDiv').outerHeight($('#MusicDiv').outerHeight());         
    }

    function setMovieHeight(){     
        $('#GenreMovieDiv').outerHeight($('#MovieDiv').outerHeight()); 
    }

    function setBookHeight(){ 
        $('#GenreBookDiv').outerHeight($('#BookDiv').outerHeight());    
    }


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

    $('form').submit(function () {           
            setMusicHeight();                 
            setMovieHeight();
            setBookHeight();


        if (input.val() !== '') {

            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();



            if (activeNumber == "Music") {

                $('#MusicDiv').fadeIn();
                $('#GenreMusicDiv').fadeIn();
                ul = $('#MusicDiv ul');

            } else if (activeNumber == "Movie") {

                $('#MovieDiv').fadeIn();
                $('#GenreMovieDiv').fadeIn();
                ul = $('#MovieDiv ul');

            } else if (activeNumber == "Book") {
                $('#BookDiv').fadeIn();
                $('#GenreBookDiv').fadeIn();
                ul = $('#BookDiv ul');

            } else {
                ul = $('#NonExistent ul');

            }


            /*Relevant Section*/     
             $('<li>' + '<a>' + 'O' + '</a>' + "&nbsp;&nbsp;&nbsp;&nbsp;" + '<span>' + inputVal + '</span>' + "&nbsp;&nbsp;&nbsp;&nbsp;" + '<a>' + 'X' + '</a></li>').hide().appendTo(ul).slideToggle(270);


            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');
            }

        };


        input.val('');   
        return false;

    });


    /*Other Relevant Section*/
    ul.on('click', 'a', function (e) {
        e.preventDefault();

        $(this).parent().slideUp('fast', function() {
            if ($('#MusicDiv').height() < 85) {
                $('#MusicDiv').fadeOut(275);
                $('#GenreMusicDiv').fadeOut(275); 
            } 

            if ($('#MovieDiv').height() < 85) {
                $('#MovieDiv').fadeOut(275);
                $('#GenreMovieDiv').fadeOut(275);
            } 

            if ($('#BookDiv').height() < 85) {
                $('#BookDiv').fadeOut(275);
                $('#GenreBookDiv').fadeOut(275);
            } 
        });


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

    });

        $(".navbar.cf li ul li").on("click", "a", function(e){
        e.preventDefault();
        input.focus(); 

    });







});

3 个答案:

答案 0 :(得分：1)

你可以只为每个锚添加一个类，然后在jQuery中引用它。

$('a.oLink').click(function(){
});

$('a.xLink').click(function(){
});

答案 1 :(得分：1)

您可以使用contains选择器来区分：

ul.on('click', 'a:contains("X")', function (e) {
  ...
}

ul.on('click', 'a:contains("O")', function (e) {
  ...
}

答案 2 :(得分：1)

你的代码混乱是对的:-) 无论如何，将“相关部分”更改为（注意添加class属性）：

/*Relevant Section*/     
$('<li>' + '<a class="O">' + 'O' + '</a>' + "&nbsp;&nbsp;&nbsp;&nbsp;" + '<span>' + inputVal + '</span>' + "&nbsp;&nbsp;&nbsp;&nbsp;" + '<a class="X">' + 'X' + '</a></li>').hide().appendTo(ul).slideToggle(270);

然后在“其他相关部分”中：

/*Other Relevant Section*/
ul.on('click', 'a.X', function (e) {

和另一个O：

ul.on('click', 'a.O', function (e) {
相关问题
最新问题