更改 <ul> 相邻鼠标悬停时的可见性 <ul><li>

Question

I am trying to change the visibility of multiple <ul> from an adjacent <ul> but I cannot figure out a way to do it without a bunch of .hide() and .show() calls. I also thought about HTML event attributes but thought that would be just as bad.

Can anyone point me in the right direction? The first col-sm-3 is my hover links, the second col-sm-3 is where I am trying to have it changed. I already figured out how to have the image in the third col change.

http://jsfiddle.net/Wy22s/453/

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <ul class="projectslist">
                <li class="tdSwOV7"><p>Project1</p></li>
                <li class="QEJfRzZ"><p>Project2</p></li>
            </ul>
        </div>
        <div class="col-sm-3">
            <ul class="attributeslist" id="project1attributes">
                <li><p>Custom Template Design</p></li>
                <li><p>Reponsive Mobile Design</p></li>
            </ul>
            <ul class="attributeslist" id="project2attributes">
                <li><p>Reponsive Mobile Design</p></li>
                <li><p>SEO Keyword Research</p></li>
            </ul>
        </div>
        <div class="col-sm-6">
            <div class="portfolio_bg">
                <ul class="imageslist">
                    <img id="myImage" src="http://i.imgur.com/tdSwOV7.png" class="img-responsive" />   
                </ul>
            </div>
        </div>
    </div>
</div>

jQuery:

$( document ).ready(function() {
    $('.projectslist li').mouseover(function() {
        tempUrl = $(this).attr('class')
        $('.imageslist img').attr('src', 'http://i.imgur.com/' + tempUrl + '.png')
    });
});

Answer 1

I would decorate the projects with project attributes as classes. And I would decorate the attributes with a data-type attributes. Then on hover, I would hide all the project attributes and then show those attribute which exist as classes on the project. Here's how it would work:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <ul class="projectslist">
                <li class="tdSwOV7 pr-seo"><p>Project1</p></li>
                <li class="QEJfRzZ pr-custom pr-seo"><p>Project2</p></li>
            </ul>
        </div>
        <div class="col-sm-3">
            <ul class="attributeslist" id="project1attributes">
                <li data-type="pr-custom"><p>Custom Template Design</p></li>
                <li data-type="pr-responsive"><p>Reponsive Mobile Design</p></li>
            </ul>
            <ul class="attributeslist" id="project2attributes">
                <li data-type="pr-responsive"><p>Reponsive Mobile Design</p></li>
                <li data-type="pr-seo"><p>SEO Keyword Research</p></li>
            </ul>
        </div>
        <div class="col-sm-6">
            <div class="portfolio_bg">
                <ul class="imageslist">
                    <img id="myImage" src="http://i.imgur.com/tdSwOV7.png" class="img-responsive" />   
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    $( document ).ready(function() {
        $('.projectslist li').mouseover(function() {
            var $theli = $(this);
            $('.attributeslist li').hide()
            .each(function(i, e) {
                if ($theli.hasClass($(e).attr('data-type')))
                    $(e).show();
            });

            tempUrl = $(this).attr('class');
            $('.imageslist img').attr('src', 'http://i.imgur.com/' + tempUrl + '.png');
        });
    });
    </script>