Question

我正在尝试更改来自相邻<ul>的多个<ul>的可见性，但如果没有一堆.hide()和.show()，我无法找到方法调用。我也考虑过HTML事件属性，但认为这也差一点。

有人能指出我正确的方向吗？第一个col-sm-3是我的悬停链接，第二个col-sm-3是我试图让它改变的地方。我已经想出如何在第三次改变中改变图像。

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

我会用项目属性作为类来装饰项目。我会用数据类型属性装饰属性。然后在悬停时，我会隐藏所有项目属性，然后显示在项目中作为类存在的那些属性。以下是它的工作原理：

<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>

更改<ul>在相邻<ul> <li> </li> </ul> </ul>的悬停时的可见性

1 个答案: