버튼 클릭시 JQuery 텍스트 대체

-1

각 상자의 아래쪽에있는 버튼을 클릭하면 해당 상자 위에 오버레이가 만들어지는 4 개의 상자를 만들려고합니다. 전에 자바 스크립트/jquery를 사용한 적이 없으므로 코드가 약간 기본입니다.버튼 클릭시 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; 
}

출처

2014-07-24 estoner

없이 특히 1rep i에 대한 의견 쓰기 매우 건설적이지 않습니다. Asker : JSfiddle.net을 만들어야합니다. – mplungjan

안녕하세요, http://codereview.stackexchange.com/에 제출하는 것이 좋습니다. 답을 찾아 볼 수 있습니다. :) – Albzi

http://www.jacklmoore.com/notes/jquery-modal-tutorial/이 튜토리얼을 꽤 잘 찾았습니다. Javascript와 기술을 넘어서서 그것을 통해 배울 수 있고 당신의 과제를 성취 할 수 있습니다. – Jason

$(".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 .. 투표 아래

출처

2014-07-24 14:59:42

버튼 클릭시 JQuery 텍스트 대체

답변

관련 문제