1

这是我一直在开发的网站：http: //jaakkouusitalo.fi/new如您所见，有四个彩色方块，它们都有不同的类别。

我想简化它，制作 if 和 else 语句。我缺乏知道该怎么做的技能，所以我决定直接在这里问。

这是我的html文件：

    <section>
        <h2>Color combination should be following:</h2>
        <ul class="colors">
            <li class="color-img1">
                <img src="img/1.png" />
                <div class="caption1">
                    #FFD800
                    </div>
                </li>

                <li class="color-img2">
                    <img src="img/2.png" />
                    <div class="caption2">

                    </div>
                </li>

                <li class="color-img3">
                    <img src="img/3.png" />
                    <div class="caption3">
                        #587498
                    </div>
                </li>

                <li class="color-img4">
                    <img src="img/4.png" />
                    <div class="caption4">
                    #E86850
                    </div>
                </li>
            </ul>
        </section>

目前我正在像这样处理我的jQuery：

$( document ).ready(function() {

            $('.caption1, .caption2, .caption3, .caption4').hide();

            $(".color-img1").hover(function() {
                $('.caption1').show();
            });

            $(".color-img2").hover(function() {
                $('.caption2').show();
            });

            $(".color-img3").hover(function() {
                $('.caption3').show();
            });

            $(".color-img4").hover(function() {
                $('.caption4').show();
            });
        });

我认为有更好的方法来做到这一点。我只是不知道怎么做。

4

5 回答 5

2

正确的方法是使用 CSS，我在下面列出了 CSS 解决方案。但是首先将使用 javascript 解决方案来回答。

请查看结果的 JS Fiddle：

Javascript 解决方案

简化您的 HTML 以仅使用 .caption 而不是 .caption1,2,3,4 和 .color-img 而不是 1,2,3,4：

<section>
    <h2>Color combination should be following:</h2>
    <ul class="colors">
        <li class="color-img">
            <img src="img/1.png" />
            <div class="caption">
                #FFD800
                </div>
            </li>

            <li class="color-img">
                <img src="img/2.png" />
                <div class="caption">
                #FFD800
                </div>
            </li>

            <li class="color-img">
                <img src="img/3.png" />
                <div class="caption">
                    #587498
                </div>
            </li>

            <li class="color-img">
                <img src="img/4.png" />
                <div class="caption">
                #E86850
                </div>
            </li>
        </ul>
    </section>

并像这样更改您的javascript - 内联注释解释它的作用：

$( document ).ready(function() {

    $('.caption').hide();
        //use .on (and mouseover) syntax over .hover
        $(".color-img").on("mouseover", function () {
        //find child element .caption, and show
        $(this).find('.caption').show();
    });

});

结果：http: //jsfiddle.net/Nh8xM/1/

CSS 解决方案

根据 javascript 版本使用简化的 HTML，但在 CSS 中，您需要做的就是：

.caption { 
  display:none;
 }
.colors li:hover .caption {
 display:block;
 }

结果：http: //jsfiddle.net/53X25/

于 2014-01-23T10:33:11.713 回答
0

采用：

  $(".color-img1,.color-img2,.color-img3,.color-img4").hover(function() {
        idnum=$(this).attr('class').replace( /^\D+/g, '').replace(/[^a-zA-Z ]/g, "")                
        class="caption"+idnum;
        $('.'+class).show();
        });
于 2014-01-23T10:27:13.590 回答
0

第一步

使用 CSS 使 .captionX 隐藏，display:none;然后你就不需要原来的 hide 语句了。

第二步

使用单个绑定$(".colors img").hover(function() {}，然后显示与“悬停”使用的对象相关的标题$(this).parent("li").children(".caption").show()或类似的东西。

于 2014-01-23T10:31:24.327 回答
0

简单地：

$("ul.colors").children('li').hover(function() {
    $(this).children('div[class^="caption"]').show();
});

当您将鼠标悬停li在ul.colors; 然后调用其类以“caption”开头的show()任何子div元素。li

或者，您可以使用 jQuery 的on()方法：

$("ul.colors").on('mouseover', 'li', function() {
    $(this).children('div[class^="caption"]').show();
});
于 2014-01-23T10:31:28.640 回答
0

您可以在所有按钮上使用相同的类来简化，请参见：

http://jsfiddle.net/FaUSG/

如您所见，您可以使用两个或多个以空格分隔的类名，如示例所示：class="color-img color-img1"

color-img处理常见行为（适用于所有按钮）， color-img1处理单个按钮行为（例如按钮颜色）

<section>
    <h2>Color combination should be following:</h2>
    <ul class="colors">
        <li class="color-img color-img1">
            <img src="img/1.png" />
            <div class="caption">
                #FFD800
                </div>
            </li>

            <li class="color-img color-img2">
                <img src="img/2.png" />
                <div class="caption">
                    HERE?
                </div>
            </li>

            <li class="color-img color-img3">
                <img src="img/3.png" />
                <div class="caption">
                    #587498
                </div>
            </li>

            <li class="color-img color-img4">
                <img src="img/4.png" />
                <div class="caption">
                #E86850
                </div>
            </li>
        </ul>
    </section>

这样代码减少到：

$(function() {
        $('.caption').hide();

        $(".color-img").hover(
            function() {
                $(this).find('.caption').show();
            },
            function() {
                // uncomment this if you also want to hide it at rollout
                // $(this).find('.caption').hide();
            }
        );
});
于 2014-01-23T10:41:49.527 回答