jQuery想要摆脱多个click语句吗

这是我的网站，我一直在工作：正如你们所看到的，有四个彩色的方块，所有的方块都有不同的等级

我想简化它，做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>

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

使用：

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

---

第一步

使用CSS使.captionX隐藏，使用

display:none则不需要原始的hide语句

第二步

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

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

当您将鼠标悬停在
ul.colors
的任何
li
子元素上，然后在
div
子元素上调用
show（）
，该
li
的类可能以“caption”开头

或者，您可以使用jQuery的
on（）
方法：

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

正确的方法是使用CSS，我在下面列出了CSS解决方案

请查看一系列结果：


JavaScript版本：
CSS版本：

Javascript解决方案

将HTML简化为只使用.caption而不是.caption 1,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>

结果:

CSS解决方案

按照javascript版本使用简化的HTML，但在CSS中，您需要做的只是：

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

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


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

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

我将使用这个。您好，我将使用kieran在下面建议的内容。感谢大家的帮助！关于显示：无请记住，如果禁用Javascript，您将永远看不到标题，而类似
$（'.caption'）.hide（）；
的内容将在禁用Javascript时显示标题（这可能是好的，也可能是坏的，这取决于你真正想要的）。你应该在禁用JS的情况下设置你想要的页面，然后用JS修改它（如果可用）。
$( 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();
    });

});

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

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