CODEWITHSUNDEEP
javascriptjquerythis
Mike Vierwind
Mike Vierwind

Reputation: 15

small javascript this problem

I have a list item with a image and text. The text is going over the image. When i hover over the text. Then the text going away and you can see the picture.

I have this html:

 <ul>
                    <li><img src="content/img/voorbeeld/projecten.jpg" alt="Project foto" width="209" height="207" />
                        <div class="text">
                            <h4>Nieuwbouw Aalanden Zwolle</h4>
                            <p>Vestibulum eget tristique ante. In hac habitasse platea dictumst.</p>
                            <a href="projecten.html" title="Project details">Project details</a>
                        </div>
                    </li>
                    <li><img src="content/img/voorbeeld/projecten.jpg" alt="Project foto" width="209" height="207" />
                        <div class="text">
                            <h4>Nieuwbouw Woonwijk in Amsterdam</h4>
                            <p>Vestibulum eget tristique ante. In hac wegweg wegweg weg tumst In hac habita abitasse platea dictumstIn hac habitasse platea dictumst.</p>
                            <a href="projecten.html" title="Project details">Project details</a>
                        </div>
                    </li>
                </ul>

And this javascript

var div     = $(".projects li"); 

    $("#footer .projects li",this).hover(function()
    {       
        if(div.hasClass("open"))
        {
            $(".projects .text").show();
            div.removeClass("open");
        }
        else
        {
            $(".text").hide();
            div.addClass("open");
        }
    });

But when i now hover of a li item. All the text of the two li items going away. How can i make it. When i hover over a item, that the other is not going away??

Upvotes: 0

Views: 83

Answers (3)

Amit Gupta
Amit Gupta

Reputation: 577

\\var div = $(".projects li"); --can remove not required

$("#footer .projects li").hover(function() \\this will suffice
{       
    var thisLi = $(this); \\get this for the item that has been hovered
    if(thisLi.hasClass("open"))
    {
        thisLi.find(".text").show();
        thisLi.removeClass("open");
    }
    else
    {
        thisLi.find(".text").hide();
        thisLi.addClass("open");
    }
});

Upvotes: 0

Robert Koritnik
Robert Koritnik

Reputation: 105039

You haven't provided code where does this come from, but the code you're using should probably be more along these lines:

//               "this" context is unknown from your code
$(".projects li", this).hover(function()
{
    // save jQuery "this" for faster reuse 
    var $this = $(this);
    if($this.hasClass("open"))
    {
        $(".text", this).show();
        $this.removeClass("open");
    }
    else
    {
        $(".text", this).hide();
        $this.addClass("open");
    }
});

Upvotes: 1

justkt
justkt

Reputation: 14766

Your tags give you the clue - you need to use this inside of your hover callbacks to make sure you are only dealing with the list item you want to work with, not both. Right now you are using the variable div, which is set to $('.projects li'), which means a jQuery object representing both list items under projects. Instead use this inside your callbacks. In the callbacks this is set to the element that is being hovered over.

$("#footer .projects li", this).hover(function() {
    if ($(this).hasClass("open")) {
        $(this).children(".text").show(); // note - not all .text divs, but only
                                          // children of this list item
        $(this).removeClass("open");
    }
    else {
        $(this).children(".text").hide(); // note - not all .text divs, but only
                                          // children of this list item
        $(this).addClass("open");
    }
});

See it in action (sans images, but you get the idea of showing and hiding text).

Upvotes: 1

Related Questions