jQuery 마우스 클릭 이벤트를 사용하여 DIV 태그의 텍스트를 영구적으로 변경합니다.

javacript 마우스 클릭 이벤트를 설정하여 div 태그의 클릭 된 텍스트 영역을 기준으로 사용자가 클릭하는 이미지의 위치를 감지합니다. 문제는 div 태그의 텍스트가 잠깐 동안 변경된 다음 HTML의 원래 텍스트로 되돌아가는 것입니다.jQuery 마우스 클릭 이벤트를 사용하여 DIV 태그의 텍스트를 영구적으로 변경합니다.

자바 스크립트 :

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#area1").click(function (b) { 
      $("#results").html("Text replaced by JS Mouse Click for area1"); 
     }); 
     $("#area2").click(function (b) { 
      $("#results").html("Text replaced by JS Mouse Click for area2"); 
     });    
     $("#area3").click(function (b) { 
      $("#results").html("Text replaced by JS Mouse Click for area3"); 
     }); 
    }); 
</script>

HTML :

<img id="pic" usemap="#imagemap1" src="image.jpg" /> 
    <map id="imgmap" name="imagemap1"> 
     <area id="area1" shape="circle" alt="" title="" coords="51,46,25" href="" target="" /> 
     <area id="area2" shape="circle" alt="" title="" coords="71,131,25" href="" target="" /> 
     <area id="area3" shape="circle" alt="" title="" coords="141,72,25" href="" target="" /> 
    </map> 

    <div id="results"> 
     Original HTML Text 
    </div>

변경됩니다 DIV 태그의 텍스트,하지만 두 번째는 "기존 HTML 텍스트"에 반환하기 전에. 사용자가 이미지 맵의 다른 부분을 클릭 할 때까지 어떻게 DIV 태그의 텍스트를 영구적으로 변경할 수 있습니까?

출처

2013-05-29 user1347648

왜 jQuery의 이전 버전을 사용하고 있습니까? 또한 '변경 사항 되돌리기'란 무엇을 의미합니까? 문제를 설명하는 바이올린을 만들 수 있습니까? –

원래 페이지를 새로 고침하는 것처럼 보입니다. 원래의 텍스트를 다시 넣는 것 같습니다. – tymeJV

클릭 핸들러의 끝에 'return false'를 추가하여 앵커의 'href'를 사용하는 페이지를 막을 수 있습니다. –

기본 동작이 클릭을 트리거하고 페이지를 새로 고침하는 것처럼 들립니다. 그것을 막아보십시오. 또한 3 클릭 핸들러를 하나로 단축했습니다.

$("[id^='area']").click(function (e) { 
    e.preventDefault(); 
    $("#results").html("Text replaced by JS Mouse Click for " + $(this).attr("id")); 
});

출처

2013-05-29 15:12:17 tymeJV

감사합니다. 이러한 "기본 동작"에 대한 자세한 정보는 어디에서 찾을 수 있습니까? 자바 스크립트, HTML 또는 브라우저 기반입니까? – user1347648

도움이됩니다. https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault – tymeJV

이 방법이 더 좋은 해결책이라고 생각합니다. #area의

대상 모든 어린이
당신이 정말로 자바 스크립트에서 텍스트를 하드 하시겠습니까? 데이터 속성을 사용하면 해당 서버 측을 생성 할 수 있습니다. $ (e.currentTarget)을 사용하면 좌표와 다른 속성을 액세스 할 수 있습니다.

지금 당신은 크게 코드를 줄일 수

$(document).ready(function() { 
     $("#imgmap area").click(function (e) { 
      var description = $(e.currentTarget).data("description"); 
      e.preventDefault(); 
      $("#results").text(description); 
     }); 
    });

를 내가 이해에서 고양이와 JSFiddles 같은 사람을. 그래서 여기에 위의 코드를 보여줄 고양이가있는 JSFiddle이 있습니다 : http://jsfiddle.net/27QtT/

출처

2013-05-29 15:59:41 Norris

jQuery 마우스 클릭 이벤트를 사용하여 DIV 태그의 텍스트를 영구적으로 변경합니다.

답변

관련 문제