Question

希望我的问题不是太复杂。

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";
}

该块被显示，因此最后一行代码很好，但我无法发布$q。我知道问题出在哪里，但我不知道如何修复它：如果我将document.getElementById("skills").innerHTML = this.responseText;代替event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText;，一切正常，但仅适用于<div id="skills'>，当然不适用于skills2。我必须将此脚本分别用于更多div ID (skills, skills2, skills3)。

我的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 -->

和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>

因此，在showSport()被调用后，$q值的按钮会显示在sport.php中。这适用于两个div ID：sport和sport2。另一项功能showSkills()应在skill.php或<div id="skills">中打开<div id="skills2">，并在$q发布$q。该部分已打开，但内部没有date。有任何想法吗？对我帮助很大。

Answer 1

为了我的口味，

event.target.parentElement.parentElement.parentElement.nextElementSibling远远超过了DOM。当我理解你的时候，你使用与多个元素相同的函数作为事件处理程序。为什么不直接将特定相关div的ID作为参数传递？我在下面添加一个例子。

＆＃13;

// 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';
}

＆＃13;

.skills {
  display: none;
}

＆＃13;

<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>

＆＃13;

AJAX中的event.target

1 个答案: