javascript - How to get this code to behave differently based on what exactly is clicked? -
first of all, apologize if code kind of chaotic. have tried trimming down significantly. http://jsfiddle.net/neowot/7hlrldn2/14/
i wrote comments in js code showing relevant areas i'm referring question. please see "relevant section" , "other relevant section".
basically, when type input box , hit enter, list item appears. on list item, can click 'x' delete list item. however, there 'o' button on left. have different function x button.
however, code says "take wrapped in 'a' tag and, when clicking that, delete list item", able differentiate 2 in code. thing have found works wrapping o in random 'd' tag instead (i don't know is) , changing code appropriately, seems nonsensical code , bad practice.
how clicking 'o' different function clicking 'x' on list item?
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"> 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"> 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"> 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 { display: block; color: white; padding:10px 5px; text-decoration:none; transition: .1s ease-in; } ul.navbar li a:hover, ul.navbar li:hover > { 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 > { 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 target of click isn't container... && container.has(e.target).length === 0) // ... nor descendant of 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>' + " " + '<span>' + inputval + '</span>' + " " + '<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(); }); });
you're right code being chaotic :-) anyway, change 'relevant section' (notice addition of class attributes):
/*relevant section*/ $('<li>' + '<a class="o">' + 'o' + '</a>' + " " + '<span>' + inputval + '</span>' + " " + '<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 o:
ul.on('click', 'a.o', function (e) {
Comments
Post a Comment