Jquery 버튼을 클릭하여 텍스트, 속성 등을 변경 한 다음 원래 상태로 돌아 가기

이미지, h1 텍스트 등을 변경하려면 버튼에 클릭 이벤트를 사용하고 있습니다. 버튼을 다시 클릭하면 다시 변경하고 싶습니다. 페이지가 원래 어떻게 보였는지. 어떻게하면 좋을까요? 다음은 지금까지 관련 코드입니다 :Jquery 버튼을 클릭하여 텍스트, 속성 등을 변경 한 다음 원래 상태로 돌아 가기

<script> 
    $(document).ready(function() { 
     $("button").click(function() { 
       $("h1").text("Heading 2"); 
       $("p").text("blah blah blah"); 
       $("#picture").attr({ src: "../img/img2.jpg", title: "a new image", alt: "descriptive picture"}); 
       $("button").text("Change back"); 
      }); 
     }); 
    </script> 


<body> 
    <h1>Heading 2</h1> 
    <img src="../img/img1.jpg" alt="basic picture" id="picture"> 
    <p>Blah blah blah</p> 
    <button>Next</button> 
</body>

출처

2014-10-25 user2358021

당신은 데이터 속성의 초기 값을 저장할 수 있습니다. 상태를 저장하는 래퍼로 추가 div가있는 Fiddle 예제를 수행하고 초기 값을 기본 데이터 값으로 추가했습니다 (예 : Fiddle). 이렇게 : <h1 data-default="Heading 1">Heading 1</h1>.

$("button").click(function() { 
if ($(".container").data("state") == "default") { 
    $("h1").text("Heading 2"); 
    $("p").text("blah blah blah"); 
    $("#picture").attr({ 
     src: "../img/img2.jpg", 
     title: "a new image", 
     alt: "descriptive picture" 
    }); 
    $(".container").data("state", "changed"); 
    $("button").text("Change back"); 
} else { 
    $("h1").text($("h1").data("default")); 
    $("p").text($("p").data("default")); 

    $("#picture").attr({ 
     src: $("#picture").data("defaultImg"), 
     title: $("#picture").data("defaultTitle"), 
     alt: $("#picture").data("defaultAlt") 
    }); 
    $(".container").data("state", "default"); 
    $("button").text($("button").data("default")); 
    } 
});

는 버튼을 제 클릭하면 데이터 속성 값으로서, 각 요소의 초기 값을 설정하는 것도 가능하다, 초기 값에 대한 두 항목을 방지한다. 참고로

$("button").click(function() { 
    if ($(".container").data("state") == "start") { 
    $("h1").data("default", $("h1").text()); 
    $("img").data("defaultAlt", $("img").attr("alt")); 
    $("img").data("defaultTitle", $("img").attr("title")); 
    $("img").data("defaultImg", $("img").attr("src")); 
    $("p").data("default", $("p").text()); 
    $("button").data("default", $("button").text()); 
    } 
    if ($(".container").data("state") != "changed") { 
    .... // rest stays the same as in first script

: http://api.jquery.com/jquery.data/

출처

2014-10-25 12:05:43

Try this Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <h1>Heading 2</h1> 
 

 
    <img src="http://home.iitk.ac.in/~amitkum/images/4.jpg" alt="basic picture" id="picture" height="100"> 
 
    <p>Blah blah blah</p> 
 
    <button>Next</button> 
 
</body> 
 
<script> 
 
    var img = 'http://home.iitk.ac.in/~amitkum/dp.jpg'; 
 
    $(document).ready(function() { 
 
    $("button").click(function() { 
 
     tmp = $('#picture').attr('src'); 
 
     $("h1").text("Heading 2"); 
 
     $("p").text("blah blah blah"); 
 
     $("#picture").attr({ 
 
     src: img, 
 
     title: "a new image", 
 
     alt: "descriptive picture" 
 
     }); 
 
     img = tmp; 
 
     $("button").text("Change back"); 
 
    }); 
 
    }); 
 
</script>

사업부 - 래퍼는 "시작"을 위해 초기 값을 설정하는 조정 및 조정 스크립트 Fiddle 조정

출처

2014-10-25 12:26:10

Jquery 버튼을 클릭하여 텍스트, 속성 등을 변경 한 다음 원래 상태로 돌아 가기

답변

관련 문제