[英]event.target in AJAX
Hopefully, my question is not too complicated. 希望我的问题不太复杂。
function showSkills(event,str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText;
}
};
xmlhttp.open("POST","skills.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);
event.target.parentElement.parentElement.parentElement.nextElementSibling.style.display = "block";
}
The block is diplayed, so the last row of code is fine, but I cannot post $q
. 该块已显示,因此最后一行代码很好,但是我无法发布$q
。 I know where the problem is, but I don't know how to fix it: If I put document.getElementById("skills").innerHTML = this.responseText;
我知道问题出在哪里,但我不知道如何解决:如果我将document.getElementById("skills").innerHTML = this.responseText;
instead of event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText;
而不是event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText;
everything works fine, but only for <div id="skills'>
, not for skills2
of course. I have to use this script for more div IDs (skills, skills2, skills3)
separately. 一切正常,但仅适用于<div id="skills'>
,当然不适用于skills2
,我必须分别将此脚本用于更多的div ID (skills, skills2, skills3)
。
My HTML: 我的HTML:
<div class="bgimg" style="background-image:url('pic/a3.jpeg');">
<h3 onclick="displayGrow(event)">bla bla</h3>
<div id="sport" class="hide resetInput"><?php include 'sport.php'; ?></div>
<div id="skills" class="hide resetInput"><?php include 'skills.php'; ?></div>
</div><!-- end of the 1st Parallax -->
<div class="bgimg" style="background-image: url('pic/a5.jpg');">
<h3 onclick="displayGrow(event)">bla bla</h3>
<div id="sport2" class="hide resetInput"><?php include 'sport.php'; ?></div>
<div id="skills2" class="hide resetInput"><?php include 'skills.php'; ?></div>
</div><!-- end of the 2nd Parallax -->
and sport.php
code: 和sport.php
代码:
<?php
include 'cookies.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST['q'])) {
$q = $_POST['q'];
}}
?>
<div class="dropdown marginTop">
<button><!-- select sport -->
<?php // "select your sport"
if (isset($q)) {
$result = mysqli_query($con, 'SELECT ' .$language. ' FROM sports WHERE name1="' .$q. '" LIMIT 1');
} else {
$result = mysqli_query($con, 'SELECT ' .$language. ' FROM page WHERE title="selSport1" LIMIT 1');
}
$row = mysqli_fetch_row($result);
print_r($row[0]);
?>
</button>
<div class="dropdown-content">
<?php // sports list
$sportlist = mysqli_query($con, 'SELECT * FROM sports WHERE title = "sports" ORDER BY ' .$language. ' ASC');
while ($row = mysqli_fetch_array($sportlist)) {
echo '
<button class = "buttonList" value="' . $row[1] . '"';?>
onclick="showSport(event, this.value); showSkills(event, this.value);"
<?php echo ' style="border:0;">' . $row[$language] . '</button>
';
}
?>
</div>
</div>
So after showSport()
was invoked, the button with $q
value is diplayed in sport.php
. 因此,在调用showSport()
之后,在sport.php
显示具有$q
值的按钮。 This works fine for both div IDs: sport
and sport2
aswell. 这对于两个div ID都适用: sport
和sport2
。 Another function showSkills()
should open skill.php
in <div id="skills">
or in <div id="skills2">
and post $q
there. 另一项功能showSkills()
应该打开skill.php
在<div id="skills">
或<div id="skills2">
和交$q
那里。 The section was opened, but without $q
inside. 该部分已打开,但内部没有$q
。 Any ideas? 有任何想法吗? Would help me a lot. 对我有很大帮助。
event.target.parentElement.parentElement.parentElement.nextElementSibling
is far too much climbing up the DOM for my taste. event.target.parentElement.parentElement.parentElement.nextElementSibling
对于我的口味来说,爬上DOM太多了。 When I understand you right, you use the same function as a event handler for multiple elements. 当我理解正确时,您可以将相同的功能用作多个元素的事件处理程序。 Why don't you just pass the ID of the particular, associated div as a parameter? 为什么不只将特定的关联div的ID作为参数传递呢? I add an example below. 我在下面添加一个示例。
// Note, I do not know what your 'str' is, so here it is just 'foo' document.getElementById('event-div-1').addEventListener('click', showSkills.bind(null, 'skills1', 'foo')); document.getElementById('event-div-2').addEventListener('click', showSkills.bind(null, 'skills2', 'foo')); document.getElementById('event-div-3').addEventListener('click', showSkills.bind(null, 'skills3', 'foo')); function showSkills(skills, event, str) { // Ajax stuff document.getElementById(skills).style.display = 'block'; }
.skills { display: none; }
<div class="skills" id="skills1">1</div> <div class="skills" id="skills2">2</div> <div class="skills" id="skills3">3</div> <div id="event-div-1">Click me for skills 1</div> <div id="event-div-2">Click me for skills 2</div> <div id="event-div-3">Click me for skills 3</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.