Question

我正在尝试创建4个盒子，点击每个盒子底部的按钮后，将在该盒子的顶部创建一个叠加层。我之前从未使用过javascript / jquery，所以我的代码有点基础。

问题：我需要在显示叠加层时将每个按钮中的文字更改为“信息少”，但在叠加层时更改回“更多信息”被删除（通过单击该按钮或打开其他一个叠加）。

PS ：如果你讨厌我的代码而想要简化它（它非常重复，我不知道如何让它更高级和更酷），请继续（解释你所做的事情也会非常有用）。

我的HTML代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Country Profiles</title>
<link href="Includes/Country_Profiles.css" rel="stylesheet" type="text/css">
<link href="Includes/About_Us.css" rel="stylesheet" type="text/css">
<script src="Includes/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
   $("#button_food").click(function(){
       $("#food_facts").slideToggle(500);
       $("#water_facts").slideUp(500);
       $("#health_facts").slideUp(500);
       $("#care_facts").slideUp(500);
       });
   $("#button_water").click(function(){
       $("#water_facts").slideToggle(500);
       $("#health_facts").slideUp(500);
       $("#food_facts").slideUp(500);
       $("#care_facts").slideUp(500);
       });
   $("#button_health").click(function(){
       $("#health_facts").slideToggle(500);
       $("#water_facts").slideUp(500);
       $("#food_facts").slideUp(500);
       $("#care_facts").slideUp(500);
       });
   $("#button_care").click(function(){
       $("#care_facts").slideToggle(500);
       $("#water_facts").slideUp(500);
       $("#food_facts").slideUp(500);
       $("#health_facts").slideUp(500);
       });
});
</script>
</head>

<body>
<div class="country_container">
    <div class="h1">Country</div>
    <div class="info">Info Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada. Praesent vitae elementum tellus, in pretium nunc. Fusce libero neque, dignissim eget magna et, vulputate ullamcorper urna. Integer a leo sed leo fringilla pulvinar. Sed fringilla mattis mauris quis placerat. Ut rhoncus lectus massa, a sagittis sapien ullamcorper ut. In hac habitasse platea dictumst. Mauris sagittis gravida justo, vitae laoreet mi posuere bibendum.</div>
    <div class="pillar_blocks">
        <div class="block" id="food">
            <div class="more_facts" id="food_facts"><h3>Food - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Food</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_food">More Information</div>
        </div>
        <div class="block" id="water">
            <div class="more_facts" id="water_facts"><h3>Water - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Water</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_water">More Information</div>
        </div>
        <!--<div class="block" id="health">
            <div class="more_facts" id="health_facts"><h3>Health - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Health</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_health">More Information</div>
        </div>-->
        <div class="block" id="care">
            <div class="more_facts" id="care_facts"><h3>Care - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Care</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_care">More Information</div>

        </div>
    </div>
</div>
</body>
</html>

我的CSS：

@charset "UTF-8";

.country_container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 20px;
}
.h1 {
    font-size: 50px;
    font-weight: 700;
    font-variant: small-caps;
    font-family: "FreightSans Pro Black", "Arial Black", sans-serif;
    margin-top: 2px;
    margin-bottom: 10px;
}
.info {
    font-size: 16px;
    font-weight: normal;
    font-variant: normal;
    line-height: 18px;
    font-family: "FreightSans Pro Book", Arial, sans-serif;
    padding-left: 4px;
}
.pillar_blocks {
    width: 840px;
    height: 820px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    position: relative;
    left: -28px;
}
.block {
    width: 360px;
    height: 360px;
    overflow: hidden;
    float: left;
    position: relative;
    margin-top: 19px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 3px;
    margin-left: 19px;
}
.block h3 {
    font-family:"FreightSans Pro Black", "Arial Black", sans-serif;
    font-size: 30px;
    font-weight: 700;
    font-variant: small-caps;
    text-align: center;
    color: #000;
}
.block p {
    font-family:"FreightSans Pro Book", Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-variant: normal;
    text-align: left;
    line-height: 18px;
    margin-top: 10px;
}
#food {
    background-color: #EF7314;
}
#water {
    background-color: #02a8c1;
}
#health {
    background-color: #ee3124;
}
#care {
    background-color: #80c342;
}
.more_facts {
    width: 400px;
    height: 372px;
    overflow: hidden;
    border-radius: 3px;
    display: none;
    margin-top: -12px;
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
}
#food_facts {
    background-color: #EF7314;
}
#water_facts {
    background-color: #02a8c1;
}
#health_facts {
    background-color: #ee3124;
}
#care_facts {
    background-color: #80c342;
}
.button {
    width: 400px;
    height: 27px;
    margin-top: 0px;
    margin-right: -20px;
    margin-left: -20px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0px;
    text-align: center;
    font-size: 18px;
    font-family: "FreightSans Pro Medium", "Arial Bold", sans-serif;
    cursor: pointer;
    font-weight: 700;
    font-style: italic;
    padding-top: 7px;
}
#button_food {
    background-color: #EF7314;
}
#button_food:hover {
    background-color: #D76812;
}
#button_water {
    background-color: #02a8c1;
}
#button_water:hover {
    background-color: #0297AE;
}
#button_health {
    background-color: #ee3124;
}
#button_health:hover {
    background-color: #D62C20;
}
#button_care {
    background-color: #80c342;
}
#button_care:hover {
    background-color: #73B03B;
}

Answer 1

您可以尝试以下代码：

$(".button").click(function(){
    if($(this).hasClass("selected")){
        $(this).siblings(".more_facts").slideUp(500);
        $(this).removeClass("selected");
        $(this).text("More Information");
    } else {
        $(".pillar_blocks").find(".selected").siblings(".more_facts").slideUp(500);
        $(".pillar_blocks").find(".selected").text("More Information");            
        $(".pillar_blocks").find(".selected").removeClass("selected");
        $(this).addClass("selected");
        $(this).siblings(".more_facts").slideDown(500);  
        $(this).text("Less Information");
    }
});

查看此Fiddle ..

按钮上的JQuery文本替换单击

1 个答案: