jQuery: добавьте DIV (контент) на страницу, где произошел щелчок мышью - PullRequest
Новая
       14

jQuery: добавьте DIV (контент) на страницу, где произошел щелчок мышью

0 голосов
/ 04 июня 2018

Я даже не уверен, что мне здесь нужно искать (что касается поисковых запросов)

У нас есть карта изображений. Я хотел бы добавить "контент", относящийся к "hotspot 'нажал на карту изображения, используя jQuery, чтобы динамически добавить некоторый контент (DIV / выпадающий список ... что угодно), где щелкнул мышью на странице / карте изображения.

то есть: нажата карта изображения.некоторые динамически заполняемые данные добавляются туда, где произошел щелчок мыши, отображая некоторые данные

Я думаю, что внутренняя часть может / будет сделана с использованием некоторого ajax или чего-либо еще (сейчас это не является реальной проблемой) ..

Мое замешательство - часть переднего конца.

обновление:

Спасибо за ответы.как вы видите в моем комментарии ниже ... Я действительно использовал position: absolute и только что использовал координаты X / Y щелчка мыши (захват)

Вот мой окончательный результат (за исключением сценария php целивызов AJAX использует) .. 

<script type="text/javascript">
            //hide (initial) dynamic content container
            $("#contentDIV").hide();


            document.addEventListener("DOMContentLoaded", function(event) {             
                //jQuery code goes here 
                $('#targetMap area').on('click', function(event) {
                    //alert($(this).attr('id')); 
                    //console.log('clicked');

                    //ajax call to load dynamic data
                    //make ajax call and send data to PHP script for discount checking
                    $.ajax({
                        //async: false,
                        type: "POST",
                        url: "target_script.php?v=1",
                        //datatype: "html",
                        datatype: "text",
                        data:{
                            "targetArea": $(this).attr('id')
                        },
                        success: function(response) {
                            //alert("PHP RETURN CHECK: "+response);
                            if($.trim(response) != ''){                             
                                //update content div with returned/formatted data
                                $("#contentDIV").html("<p> MY TARGET AREA IS: " + response + "</p>");   
                                $("#contentDIV").show().css( {position:"absolute", top:event.pageY, left: event.pageX});                            
                            }else{
                                //update content div with returned/formatted data
                                $("#contentDIV").html("<p> - NO DATA WAS RETURNED FOR THIS AREA - (See Scott, you're in trouble)</p>");
                                $("#contentDIV").show().css( {position:"absolute", top:event.pageY, left: event.pageX});    
                            }
                        },
                        error: function(response) {
                            alert("PHP FAIL RETURN CHECK: "+ 'Ready State: '+ response.readyState + ' Status: ' + response.status);
                            //console.log(response);
                        }

                    });
                });

            });         
        </script>


        <p> 
            <img src="map.gif" width="560" height="280" border="0" usemap="#targetMap">
            <map id="targetMap" name="targetMap">       
                <area shape="poly" coords="514,22,507,50,479,57,477,70,458,78,451,96,490,87,503,102,531,83,540,47,533,23" href="#" alt="northeast" id="northeast">
                <area shape="poly" coords="60,135,104,181,180,186,182,162,164,135,153,112,161,82,125,72,124,106,129,134,119,133" href="#" alt="western" id="western">
                <area shape="rect" coords="3,44,123,129" href="#" alt="rocky mountain" id="rocky mountain">
                <area shape="poly" coords="149,8,129,73,163,82,153,111,183,163,176,188,214,206,237,203,277,204,280,184,281,157,292,153,291,115,278,112,281,59,281,31" href="#" alt="rocky mountain" id="rocky mountain" >
                <area shape="poly" coords="423,53,362,34,282,32,280,110,293,116,293,124,348,124,345,117,372,119,390,154,402,144,421,138,422,130,422,107,436,107,443,108,449,99,450,98,441,74" href="#" alt="midwest" id="midwest" >
                <area shape="poly" coords="249,203,273,242,309,267,328,270,352,241,375,235,398,237,402,228,399,173,383,174,389,155,373,118,339,119,344,124,292,124,291,154,282,157,280,205" href="#" alt="midsouth" id="midsouth" >
                <area shape="poly" coords="400,174,402,223,432,226,478,268,485,254,462,202,504,155,498,142,437,152,446,142,440,136,426,132,417,139,400,143,394,151,392,150,384,171" href="#" alt="southeast" id="southeast" >
                <area shape="poly" coords="503,111,499,98,487,87,449,96,442,109,423,106,421,130,448,141,442,150,456,149,496,140,499,122" href="#" alt="mid atlantic" id="mid atlantic">
            </map>
        </p>

        <div id="contentDIV" style="display:none; padding:10px; border:2px solid #ccc; background-color:#eee; font-family:Arial; font-size:12px; color:#f00;"></div>

Adding this dynamically generated content to the page/map where the mouse click happened?

1 Ответ

0 голосов
/ 04 июня 2018

Похоже, у вас довольно широкий вопрос, поэтому я собираюсь сосредоточить свой ответ на части о создании нового элемента div, в котором была нажата мышь.

По сути, вам понадобятся эти недавно созданныеэлементы, имеющие display: absolute; css свойство, чтобы их можно было создать где угодно, а затем по событию щелчка мыши получить мышь x и y, используя pageX и pageY атрибутов.

Вот пример JFiddle, который я сделал, демонстрируя это: https://jsfiddle.net/BrandonQDixon/d7yhkrzf/32/

Код выглядит следующим образом: 

$(function() {
    console.log("script begins");
    $(document).on("click",function(e) {
        console.log("Body clicked");

        let x = e.pageX;
      let y = e.pageY;

      addCircle(x,y);
  });
});

/**
* Add a circle to the document and return its handle
*/
function addCircle(x,y) {
    let e = document.createElement('div');
  $(e).addClass("circle");

  let adjX = x - 50; //click happens in center
  let adjY = y - 50; 

  $(e).css("left",adjX);
  $(e).css("top",adjY);
  document.body.appendChild(e);
  return e;
}

Действие выше происходит на $(e) .css («слева») и $ (e) .css («верх»)

И CSS: 

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,255,0.9);
  border: 2px solid black;
  position: absolute;
}

Важной частью здесь является «позиция: абсолютная».

...