0

Here's what I'm working on:

http://moresidencesatlanta.com/map/map.html http://moresidencesatlanta.com/map/scripts-map.js

I'm trying to figure out how to set up the .hover function so I don't have to hard code all the names on the right side. Like I have here:

jQuery(".listid1").hover(
        function(){
            $(".list1").stop(true, true).fadeToggle();
        }
    );
    jQuery(".listid2").hover(
        function(){
            $(".list2").stop(true, true).fadeToggle();
        }
    );

The data looks like this:

tooltipsData = [ 

        /* Resturants - Brown */
        {"id":"1","x":"72.8","y":"23.2","title":"F&B Atlanta","image":null,"className":"brown","status":"1",
        "content":"F&B Atlanta <img src=\"spacer.gif\" width=\"1px\">"},

        {"id":"2","x":"44.5","y":"80.6","title":"Antica Posta","image":null,"className":"brown","status":"1",
        "content":"Antica Posta <img src=\"spacer.gif\" width=\"1px\">"},

I thought this might work but the variable (id) ends up being the last id (98) in the data list.

jQuery.each('.listid' + [id]).hover(
            function(){
                $('.list' + [id]).stop(true, true).fadeToggle();
            }
        );

Any suggestions or solutions that may work here? Thanks!

Improve this question
7
  • 3
    Please edit your question to add a minimal reproduction example of the problem you're trying to deal with. The live website link is nice for context, but if/when the URL changes or the site goes offline, it makes this question useless to any future reader. Further, having to dig through your long JS code to find the bug discourages accurate answers. Strip it down to the bare bones of the problem and put the code in your question, and set up a jsFiddle (or use the built-in snippet) to give us a clear example of the problem you're trying to solve. Thanks. Commented Oct 23, 2014 at 15:43
  • 1
    @op what you want to achieve is so easy if only you make some effort and think about it, im sure you can find a solution for it on your own. if not, edit your question and post your attempts so far and we will gladly assist you. Commented Oct 23, 2014 at 15:46
  • 1
    Sorry. I thought it would be easier to send the links instead of pasting in code. Trying my best to make it work and to explain what I'm trying to do is even tougher for me. I'll try to edit my question better. Commented Oct 23, 2014 at 16:08
  • 1
    Appreciate it Chris! I'll try to do better next time. Commented Oct 23, 2014 at 16:33
  • 1
    Great! It isn't being picky -- minimal examples of your problem and short bits of code help us help you. AND, the real goal of this site is to gather generally useful problem/solution pairs, so adding non-specific detail to your question helps the whole thing be more applicable to a wider audience. Again, thanks for editing! Here's a little guide on asking good questions, sometimes the process of asking leads to a solution before you even post the question! stackoverflow.com/help/how-to-ask Commented Oct 23, 2014 at 16:58

2 Answers 2

Reset to default
1

Try the following:

$('.tooltipsList').on('mouseover','span', function(){

    var id = $(this).attr('class');
    id = id.replace('listid','');
    var xid = id.split(' ');

    $('.list'+ xid[0]).stop(true,true).fadeIn();

});
$('.tooltipsList').on('mouseout','span', function(){

    var id = $(this).attr('class');
    id = id.replace('listid','');
    var xid = id.split(' ');

    $('.list'+ xid[0]).stop(true,true).fadeOut();

});

Explanation:

  1. Get the class attribute of current mouseover link. var id = $(this).attr('class'); // result= .list1 brown.
  2. Remove the word list from the class first. id = id.replace('listid',''); // result = 1 brown
  3. Split the result with a space var xid = id.split(' '); // result = Array(0=>1,1=>brown).
  4. $('.list'+ xid[0]) is the element you are looking for.

FIDDLE EXAMPLE

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This code seems to work. I don't understand it but it works lol. I will study it and try to make sense of it. Thank you so much for your assistance.
@jacksonmurphy I have added a bit of explanation. Hope it will get you started.
It all seems to be working but I am getting an error from some other code I'm using… Should I edit my question? or post in the comment? Not sure the best practices here yet...
@jacksonmurphy Definitely a new question with minimal steps for reproducing the problem. When you edit a solved question and turn it into a different question, they call that a "chameleon question".
I think I got it resolved. Thanks again for all the help here. You all rock!
1

The below jQuery will set up the hover event on all elements that include a class that starts with "listid". It then products the appropriate ".list" selector by cutting the number portion of the hovered class.

$("[class^=listid]").on("mouseover", function(){    //set up event handler on all items in list
    var listclass = $(this).attr('class').match(/listid[\d]*/).toString();    //extract hovered class (listid#) using regex
    var listselector = ".list" + listclass.substring(6);    //convert hovered class to matching list# class
    $(listselector).stop(true, true).fadeToggle();    //your function to toggle fade
});
$("[class^=listid]").on("mouseout", function(){
    var listclass = $(this).attr('class').match(/listid[\d]*/).toString();
    var listselector = ".list" + listclass.substring(6);   
    $(listselector).stop(true, true).fadeToggle();
});

JSFiddle DEMO

*While this does solve your problem, you should rethink the way you have structured these elements because it is really inefficient and repetitive (but then again, you may not have the ability to restructure your html and css in which case this 'hacky' solution is the way to go).

Improve this answer

3 Comments

Thanks JRulle! I tried your code but I'm getting a TypeError. This js code was already in place and now I'm trying to add functionality to it. "Hacky' is a perfect why to describe what I'm doing here. lol. I barely know enough JS in the first place. Learning as I go here.
You can try the updated code (I also added the functionality to fade the blocks back out when the mouse leaves the span element. I posted a JSFiddle too.
@jacksonmurphy I just annotated each line of the javascript function to explain what each one is doing to help you follow/learn from the code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.