我创建了这个可点击的地图，它根据您点击的位置打开问题。但在手机上时，只有某些区域可以单击，并且当单击第一个区域时，X 按钮在手机上很大，但在后面的区域中，X 按钮是正常大小。我真的不知道如何解决这些问题...我需要在明天之前发布这份调查，我很迷失。
function remove(el) {
var element = el;
element.remove();
}
function closeArea(id) {
var element = document.getElementById('question-item-' + id);
element.remove();
}
[].forEach.call(document.getElementsByTagName("area"), function(el) {
el.addEventListener("click", function(e) {
var id = el.getAttribute("data-target").replace("questions", "");
var content = document.getElementById("hidden-question").innerHTML.replaceAll("{NMB}", id);
$("#questions-to-show").prepend(content);
});
});
[].forEach.call(document.getElementsByTagName("area"), function(el) {
el.addEventListener("touchstart", function(e) {
var id = el.getAttribute("data-target").replace("questions", "");
var content = document.getElementById("hidden-question").innerHTML.replaceAll("{NMB}", id);
$("#questions-to-show").prepend(content);
});
});
function submitAnswer1answer1() {
$('#form').validate();
if (!$('#form').valid()) {
alert("Please fill all fields!")
return;
}
var form_data = document.getElementById("cotnent-body").getElementsByTagName("input");
var i;
var data = [];
for (i = 0; i < form_data.length; i++) {
if (form_data[i].checked || form_data[i].type == "text")
data.push(form_data[i].value);
}
//console.log(data)
google.script.run.saveData(data); // send to google app script
document.getElementById("content-hide").style.display = "none"; // make form invisible
document.getElementById("fomr-finished").style.display = "block"; // Optional if you want to give a completion feedback!
}
$(document).ready(function() {
// Add the "required" attribute to all input elements
$('input').attr('required', true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<h1>
Pain Characteristics
</h1>
<p><b>Click on the areas you experiance <b><u>chronic pain</u></b>, then scroll down and answer the questions.</b><br> No limit to how many areas you can choose.<br>(Chronic pain - longer than 3 months)</p>
<img src="https://i.ibb.co/SKGt6C8/Body.jpg" usemap="#image-map" id="clickable-image" />
<map name="image-map">
<area title="1" style="cursor:pointer;" alt="Area 1" data-target="questions1" coords="159,165,12"
shape="circle">
<area title="2" style="cursor:pointer;" alt="Area 2" data-target="questions2" coords="208,164,12"
shape="circle">
<area title="3" style="cursor:pointer;" alt="Area 3" data-target="question3" coords="117,193,12" shape="circle">
<area title="4" style="cursor:pointer;" alt="Area 4" data-target="questions4" coords="248,193,12"
shape="circle">
<area style="cursor:pointer;" alt="Area 6" data-target="questions6" title="6" coords="256,291,NaN"
shape="circle">
<area style="cursor:pointer;" alt="Area 5" data-target="questions5" title="5" coords="110,289,NaN"
shape="circle">
<area title="7" style="cursor:pointer;" alt="Area 7" data-target="questions7" coords="157,217,12"
shape="circle">
<area title="8" style="cursor:pointer;" alt="Area 8" data-target="questions8" coords="209,214,12"
shape="circle">
<area title="9" style="cursor:pointer;" alt="Area 9" data-target="questions9" coords="160,262,12"
shape="circle">
<area title="10" style="cursor:pointer;" alt="Area 10" data-target="questions10" coords="209,262,12"
shape="circle">
<area title="11" style="cursor:pointer;" alt="Area 11" data-target="questions11" coords="153,307,12"
shape="circle">
<area title="12" style="cursor:pointer;" alt="Area 12" data-target="questions12" coords="212,309,12"
shape="circle">
<area title="13" style="cursor:pointer;" alt="Area 13" data-target="questions13" coords="143,354,12"
shape="circle">
<area title="14a" style="cursor:pointer;" alt="Area 14a" data-target="questions14a" coords="181,333,12"
shape="circle">
<area title="14b" style="cursor:pointer;" alt="Area 14b" data-target="questions14b" coords="182,368,12"
shape="circle">
<area title="15" style="cursor:pointer;" alt="Area 15" data-target="questions15" coords="223,354,12"
shape="circle">
<area title="16" style="cursor:pointer;" alt="Area 16" data-target="questions16" coords="150,427,12"
shape="circle">
<area title="17" style="cursor:pointer;" alt="Area 17" data-target="questions17" coords="220,429,12"
shape="circle">
<area title="18" style="cursor:pointer;" alt="Area 18" data-target="questions18" coords="153,530,12"
shape="circle">
<area title="19" style="cursor:pointer;" alt="Area 19" data-target="questions19" coords="213,530,12"
shape="circle">
<area title="20" style="cursor:pointer;" alt="Area 20" data-target="questions20" coords="153,621,12"
shape="circle">
<area title="21" style="cursor:pointer;" alt="Area 21" data-target="questions21" coords="210,621,12"
shape="circle">
<area title="22" style="cursor:pointer;" alt="Area 22" data-target="questions22" coords="430,163,12"
shape="circle">
<area title="23" style="cursor:pointer;" alt="Area 23" data-target="questions23" coords="478,164,12"
shape="circle">
<area title="24" style="cursor:pointer;" alt="Area 24" data-target="questions24" coords="388,191,12"
shape="circle">
<area title="25" style="cursor:pointer;" alt="Area 25" data-target="questions25" coords="519,192,12"
shape="circle">
<area title="26" style="cursor:pointer;" alt="Area 26" data-target="questions26" coords="381,290,12"
shape="circle">
<area title="27" style="cursor:pointer;" alt="Area 27" data-target="questions27" coords="527,287,12"
shape="circle">
<area title="28" style="cursor:pointer;" alt="Area 28" data-target="questions28" coords="427,213,12"
shape="circle">
<area title="29" style="cursor:pointer;" alt="Area 29" data-target="questions29" coords="479,213,12"
shape="circle">
<area title="30" style="cursor:pointer;" alt="Area 30" data-target="questions30" coords="429,259,12"
shape="circle">
<area title="31" style="cursor:pointer;" alt="Area 31" data-target="questions31" coords="479,259,12"
shape="circle">
<area title="32" style="cursor:pointer;" alt="Area 32" data-target="questions32" coords="425,306,12"
shape="circle">
<area title="33" style="cursor:pointer;" alt="Area 33" data-target="questions33" coords="483,306,12"
shape="circle">
<area title="34" style="cursor:pointer;" alt="Area 34" data-target="questions34" coords="413,352,12"
shape="circle">
<area title="35a" style="cursor:pointer;" alt="Area 35a" data-target="questions35a" coords="454,332,12"
shape="circle">
<area title="35b" style="cursor:pointer;" alt="Area 35b" data-target="questions35b" coords="455,369,12"
shape="circle">
<area title="36" style="cursor:pointer;" alt="Area 36" data-target="questions36" coords="493,352,12"
shape="circle">
<area title="37" style="cursor:pointer;" alt="Area 37" data-target="questions37" coords="418,427,12"
shape="circle">
<area title="38" style="cursor:pointer;" alt="Area 38" data-target="questions38" coords="485,426,12"
shape="circle">
<area title="39" style="cursor:pointer;" alt="Area 39" data-target="questions39" coords="423,528,12"
shape="circle">
<area title="40" style="cursor:pointer;" alt="Area 40" data-target="questions40" coords="484,528,12"
shape="circle">
<area title="41" style="cursor:pointer;" alt="Area 41" data-target="questions41" coords="426,619,12"
shape="circle">
<area title="42" style="cursor:pointer;" alt="Area 42" data-target="questions42" coords="485,620,12"
shape="circle">
</map>
<div style="text-align: center; margin-top: 50px; display: none;" id="fomr-finished">
<h1>Thanks for completing the form!</h1>
<p>We appreciate your time and information.</p>
</div>
</body>
<div id="hidden-question" style="display: none;">
<div id="question-item-{NMB}" class="questions">
<form>
<div class="nav-cancel is-active" style="position: absolute;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="cursor:pointer;" viewBox="0 0 24 24" onclick="closeArea('{NMB}')">
<path
d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
</svg>
</div>
<h2>Area {NMB}</h2>
<style>
h2 {
font-size: 36px;
}
</style>
<div class="Qr7Oae" role="listitem">
<input type="text" value="Area {NMB}" style="display: none;">
<div jsmodel="CP1oW" data-params="%.@.[1631360647,"On average, how intense is the chronic pain",null,5,[[142468032,[["0"],["1"],["2"],["3"],["4"],["5"],["6"],["7"],["8"],["9"],["10"]],true,["No pain","Severe pain"],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"On average, how <u>intense</u> is the pre-menstrual pain (pain before periods)?"]],"i23","i24{NMB}","i25{NMB}",false]">
<div class="M4DNQ">
<div id="q1a1{NMB}" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}">
<span class="M7eMe">On average, how <b><u>intense</u></b> is the chronic pain </span>
<span class="vnumgf" id="q1a1{NMB}" aria-label="Required question"> *</span>
</div>
<div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div>
</div>
<div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q1a1{NMB}" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup">
<br>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="0" required>
<span class="Zki2Ve" dir="auto">0 (No pain)</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="1">
<span class="Zki2Ve" dir="auto">1</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="2">
<span class="Zki2Ve" dir="auto">2</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="3">
<span class="Zki2Ve" dir="auto">3</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="4">
<span class="Zki2Ve" dir="auto">4</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="5">
<span class="Zki2Ve" dir="auto">5</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="6">
<span class="Zki2Ve" dir="auto">6</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="7">
<span class="Zki2Ve" dir="auto">7</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="8">
<span class="Zki2Ve" dir="auto">8</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="9">
<span class="Zki2Ve" dir="auto">9</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity{NMB}" value="10">
<span class="Zki2Ve" dir="auto">10 (Severe pain)</span>
</label>
</div>
<div jsname="Rfh2Tc" class="SL4Sz" id="q1a1{NMB}" role="alert"></div>
</div>
</div>
<div id="Area {NMB}"></div>
<br>
<br>
<br>
<div class="Qr7Oae" role="listitem">
<div jsmodel="CP1oW" data-params="%.@.[1631360647,"On average, what is the duration of the chronic pain?",null,5,[[142468032,[["0"],["1"],["2"],["3"],["4"],["5"],["6"],["7"],["8"],["9"],["10"]],true,["No pain","Severe pain"],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"On average,what is the duration of the chronic pain?"]],"q1a1{NMB}","i24{NMB}","i25{NMB}",false]">
<div class="M4DNQ">
<div id="q1a1{NMB}" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}">
<span class="M7eMe">On average, what is the <b><u>duration</u></b> of the
chronic pain </span>
<span class="vnumgf" id="i26{NMB}" aria-label="Required question"> *</span>
</div>
<div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div>
</div>
<div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q1a1{NMB}" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup">
<br>
<label class="T5pZmf">
<input type="radio" name="duration1{NMB}" value="1" required>
<span class="Zki2Ve" dir="auto">3-4 months</span>
</label>
<label class="T5pZmf">
<input type="radio" name="duration1{NMB}" value="2">
<span class="Zki2Ve" dir="auto">5-6 months</span>
</label>
<label class="T5pZmf">
<input type="radio" name="duration1{NMB}" value="3">
<span class="Zki2Ve" dir="auto">7-8 months</span>
</label>
<label class="T5pZmf">
<input type="radio" name="duration1{NMB}" value="4">
<span class="Zki2Ve" dir="auto">9-10 months</span>
</label>
<label class="T5pZmf">
<input type="radio" name="duration1{NMB}" value="5">
<span class="Zki2Ve" dir="auto">11-12 months</span>
</label>
<label class="T5pZmf">
<input type="radio" name="duration1{NMB}" value="6">
<span class="Zki2Ve" dir="auto">More than a year</span>
</label>
</div>
<div jsname="Rfh2Tc" class="SL4Sz" id="i25{NMB}" role="alert"></div>
</div>
</div>
<div id="Area {NMB}"></div>
<br>
<br>
<br>
<div class="Qr7Oae" role="listitem">
<div jsmodel="CP1oW" data-params="%.@.[1631360647,"Do you take pain killers for the pain?",null,5,[[142468032,[["0"],["1"],["2"],["3"],["4"],["5"],["6"],["7"],["8"],["9"],["10"]],true,["No pain","Severe pain"],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"Do you take pain killers for the pain"]],"q1a2","i24{NMB}","i25{NMB}",false]">
<div class="M4DNQ">
<div id="q2a1" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}">
<span class="M7eMe">Do you take <b><u>pain killers</u></b> for the pain </span>
<span class="vnumgf" id="i26{NMB}" aria-label="Required question"> *</span>
</div>
<div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div>
</div>
<div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q2a1" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup">
<br>
<label class="T5pZmf">
<input type="radio" name="painkillers1{NMB}" value="1" required>
<span class="Zki2Ve" dir="auto">Yes</span>
</label>
<label class="T5pZmf">
<input type="radio" name="painkilles1{NMB}" value="2">
<span class="Zki2Ve" dir="auto">No</span>
</label>
</div>
<div jsname="Rfh2Tc" class="SL4Sz" id="i25{NMB}" role="alert"></div>
</div>
</div>
<div id="Area {NMB}"></div>
<br>
<br>
<br>
<div class="Qr7Oae" role="listitem">
<div jsmodel="CP1oW" data-params="%.@.[1631360647,"If yes, do they help?",null,5,[[142468032,[["0"],["1"],["2"],["3"],["4"],["5"],["6"],["7"],["8"],["9"],["10"]],true,["No pain","Severe pain"],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"If yes, do they help?"]],"q2a1","i24{NMB}","i25{NMB}",false]">
<div class="M4DNQ">
<div id="q3a1" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}">
<span class="M7eMe"><b><u>If yes</u></b>, do they help?</span>
<span class="vnumgf" id="i26{NMB}" aria-label="Required question"> *</span>
</div>
<div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div>
</div>
<div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q3a1" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup">
<br>
<label class="T5pZmf">
<input type="radio" name="painkillers2{NMB}" value="0">
<span class="Zki2Ve" dir="auto">Do not take painkillers</span>
</label>
<label class="T5pZmf">
<input type="radio" name="painkillers2{NMB}" value="1">
<span class="Zki2Ve" dir="auto">They don't help</span>
</label>
<label class="T5pZmf">
<input type="radio" name="painkillers{NMB}" value="2">
<span class="Zki2Ve" dir="auto">Help rarely</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity2{NMB}" value="3">
<span class="Zki2Ve" dir="auto">Help sometimes</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity2{NMB}" value="4">
<span class="Zki2Ve" dir="auto">Help most of the times</span>
</label>
<label class="T5pZmf">
<input type="radio" name="intensity2{NMB}" value="5">
<span class="Zki2Ve" dir="auto">Always help</span>
</label>
</div>
<div jsname="Rfh2Tc" class="SL4Sz" id="i25{NMB}" role="alert"></div>
</div>
</div>
<div id="Area {NMB}"></div>
</form>
</div>
</div>
https://script.google.com/macros/s/AKfycbynVUGIq2I-9-I5Iu7NLhR0MbWo7eYSzBLA4wK2tGcd4ZJPzvx-tZsTIPOXh0KZzpn1/exec你有 jQuery。使用它
$("area").on("click touchstart", function() {
const id = $(this).data("target").replace("questions", "");
let content = $("#hidden-question").html();
content = content.replaceAll("{NMB}", id);
$("#questions-to-show").prepend(content);
});