Question

以下是我一直在处理的网站：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();
            });
        });

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

Answer 1

执行此操作的正确方法是使用CSS，我已在下面列出了CSS解决方案。但首先会回答javascript解决方案。

请参阅JS小提琴的结果：

JavaScript版本：http://jsfiddle.net/Nh8xM/1/
CSS版本：http://jsfiddle.net/53X25/

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/

Answer 2

使用：

  $(".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();
        });

Answer 3

第一步

使用CSS使用display:none;隐藏.captionX，然后您将不需要原始隐藏声明。

第二步

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

Answer 4

简单地：

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

当您将鼠标悬停在li的{{1}}个孩子身上时，会激活此悬停功能。然后在ul.colors的{{1}}子元素上调用show()，其中div类可能以“标题”开头。

或者，您可以使用jQuery的li方法：

on()

Answer 5

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

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();
            }
        );
});

jQuery想要摆脱多个单击语句

5 个答案: