0

div タグ内のテキストがクリックされた画像の領域に基づいて、ユーザーが画像のどこをクリックしたかを検出する JavaScript マウス クリック イベントをセットアップしました。問題は、div タグのテキストが一瞬変更された後、HTML の元のテキストに戻ることです。

Javascript:

<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 テキスト」に戻るまでの 1 秒間だけです。ユーザーがイメージ マップの別の部分をクリックするまで、DIV タグのテキストを永続的に変更するにはどうすればよいですか?

4

2 に答える 2

3

デフォルトのアクションがクリックでトリガーされ、ページが更新されているようです。それを防いでみてください。また、3 つのクリック ハンドラを 1 つに短縮しました。

$("[id^='area']").click(function (e) {
    e.preventDefault();
    $("#results").html("Text replaced by JS Mouse Click for " + $(this).attr("id"));
});
于 2013-05-29T15:12:17.913 に答える