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

Question

First of all, I apologize if this code is kind of chaotic. 首先，对于此代码是否有点混乱，我深表歉意。 I have tried trimming it down significantly. 我曾尝试将其大幅缩小。 http://jsfiddle.net/neowot/7hLrLdn2/14/ http://jsfiddle.net/neowot/7hLrLdn2/14/

I wrote comments in the JS code showing the relevant areas I'm referring to for this question. 我在JS代码中写了注释，显示了我针对该问题所涉及的相关领域。 Please see "Relevant Section" and "Other Relevant Section". 请参阅“相关部分”和“其他相关部分”。

Basically, when you type into the input box and hit enter, a list item appears. 基本上，当您在输入框中键入内容并按Enter键时，将出现一个列表项。 On the list item, you can click the 'X' to delete that list item. 在列表项上，您可以单击“ X”删除该列表项。 However, there is also an 'O' button on the left. 但是，左侧也有一个“ O”按钮。 I would like it to have a different function than the X button. 我希望它具有与X按钮不同的功能。

However, the code basically says "take anything wrapped in an 'a' tag and, when clicking that, delete the list item", so what I would like to be able to do is differentiate the two in the code. 但是，代码基本上说“将包裹在'a'标记中的所有内容都删除，然后单击删除列表项”，因此我想做的是区分代码中的两者。 The only thing I have found that works is wrapping O in a random 'd' tag instead (I don't even know what that is) and changing the code appropriately, but obviously that just seems like nonsensical code and bad practice. 我发现唯一可行的方法是将O包裹在随机的'd'标签中（我什至不知道那是什么），并适当地更改代码，但是显然这看起来像是荒谬的代码和不良做法。

How do I get clicking 'O' to be a different function than clicking 'X' on a list item? 我如何单击“ O”而不是单击列表项中的“ X”？

HTML 的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 的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 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(); 

    });







});

Answer 1

You could just add a class to each anchor and then reference that in jQuery. 您可以只向每个锚点添加一个类，然后在jQuery中对其进行引用。

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

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

Answer 2

You can use the contains selector to differentiate: 您可以使用contains选择器来区分：

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

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

Answer 3

You're right about the code being chaotic :-) Anyway, change 'Relevant Section' to (Notice the addition of class attributes): 您对代码混乱很正确：-)无论如何，将“相关部分”更改为（注意添加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);

Then in 'Other Relevant Section': 然后在“其他相关部分”中：

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

and another for O: 另一个代表O：

ul.on('click', 'a.O', function (e) {

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

问题描述

3 个解决方案

解决方案1
1 2015-05-14 18:41:09

解决方案2
1 2015-05-14 18:42:14

解决方案3
1 已采纳 2015-05-14 18:42:56

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

问题描述

3 个解决方案

解决方案1 1 2015-05-14 18:41:09

解决方案2 1 2015-05-14 18:42:14

解决方案3 1 已采纳 2015-05-14 18:42:56

解决方案1
1 2015-05-14 18:41:09

解决方案2
1 2015-05-14 18:42:14

解决方案3
1 已采纳 2015-05-14 18:42:56