weixin_33749131 2017-07-25 06:31 采纳率: 0%
浏览 69

如何使用脚本来获得更多的div ID?

希望我的问题不会太复杂......

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

“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()之后,在sport.php中将显示具有$ q值的按钮,div ID:sport和sport2都可以正常工作。 另一个函数showSkills()应该在<div id =“ skills”>或 <div id =“ skills2”>中打开skill.php并在其中发布$ q。该部分已打开,但内部没有$q。你们有任何建议吗?

  • 写回答

1条回答 默认 最新

  • weixin_33701617 2017-07-25 06:46
    关注

    event.target.parentElement.parentElement.parentElement.nextElementSibling is far too much climbing up the DOM for my taste. 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? 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>

    </div>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)