javascript - Drop down menu on click on variable id -

-

i have page grid of images. want drop down appear on whatever image clicked. code have allows specific id, rather id. code have works fine, it's id specific.

css:

.wide { width:50px; } .high { height:50px; } table {      border-collapse:collapse;     margin:0px;     padding:0px; } td {     margin:0px;     padding:0px; } td img {     display:block; } .messagepop {     background-color:#ffffff;     border:1px solid #999999;     cursor: pointer;     display:none;     margin-top: 5px;     padding-left:2px;     position:absolute;     text-align:left;     width:50px;     z-index:50;     font-family:tahoma; } .messagepop p, .messagepop.div{     border-bottom: 1px solid #efefef;     line-height:1.3em;     display:inline; } .close {     color:blue; }

html:

<td class="wide high">     <div class="messagepop pop" id="x1y1pop">         <p>dfkj</p>         <p>alksdjh</p>         <p class="close">cancel</p>     </div>      <img alt="test" src="images/gray.jpg" class="wide high" id="x1y1" /> </td>

jquery:

function deselect(e) {     $('#x1y2pop').slidefadetoggle(function () {         e.removeclass('selected');     }); }  $(function () {     $('#x1y2').on('click', function () {         if ($(this).hasclass('selected')) {             deselect($(this));         } else {             $(this).addclass('selected');             $('#x1y2pop').slidefadetoggle();         }         return false;     });      $('.close').on('click', function () {         deselect($('#x1y2'));         return false;     }); });  $.fn.slidefadetoggle = function (easing, callback) {     return this.animate({         opacity: 'toggle',         height: 'toggle'     }, 'fast', easing, callback); };

i need $('#x1y2pop').slidefadetoggle , $('#x1y2').on , $('#x1y2pop').slidefadetoggle(); , deselect($('#x1y2')); able accept variables rather static ids. 

$(selector).on('click', function(){

where selector variable. possible?

if understanding correctly, can fix problem best targeting classes instead of ids. additionally, can use jquery's .prev() target related <div>.

something this:

$(function () {     $('.cantoggle img').on('click', function () {         if ($(this).hasclass('selected')) {             deselect($(this));         } else {             $(this).addclass('selected');             $(this).prev(".messagepop.pop").slidefadetoggle();         }         return false;     });      $('.close').on('click', (function (e) {         e.preventdefault();         var pop = $(this).closest(".messagepop.pop");         pop.slidefadetoggle(function() {             pop.next("img").removeclass('selected');         });     }); }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="cantoggle">     <tr>         <td class="wide high">             <div class="messagepop pop" id="x1y1pop">                 <p>dfkj</p>                 <p>alksdjh</p>                 <p class="close">cancel</p>             </div>              <img alt="test" src="images/gray.jpg" class="wide high" id="x1y1" />         </td>         <td class="wide high">             <div class="messagepop pop" id="x1y2pop">                 <p>dfkj</p>                 <p>alksdjh</p>                 <p class="close">cancel</p>             </div>              <img alt="test" src="images/gray.jpg" class="wide high" id="x1y2" />         </td>     <tr> </table>

Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more