点击span标签切换HTML显示并传参PHP时str变量undefined问题求助

问题描述 #

想要实现点击.flip类的span标签时，切换表格的显示/隐藏状态，同时通过Ajax将点击项的内容传递给PHP文件，最终根据点击内容展示对应对比表格。但目前str变量始终返回undefined，无法将数据传递到PHP。

原始代码 #

JavaScript

//var str = $("#flip").innerHTML;
//var str = $(".flip").innerHTML;
var str = $("#results > flip").innerHTML;
console.log(str);

$(document).ready(function() {
  $(".flip").click(function() {

    $.get("panel.php?id=" + str, function(response) {
      // Log the response to the console for testing
      console.log("Response: " + response);
      $(".panel").slideToggle("slow");
    });

  });
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="results">

  <span class="flip">123</span><br>
  <span class="flip">456</span><br>
  <span class="flip">789</span>

</div>

<div class="panel" style="display: none;">
  <p>This is a test.</p>

</div>

问题根源 #

• 选择器完全错误：你用$("#results > flip")，但HTML中是class="results"的div（不是id），子元素是.flip类的span（不是<flip>标签），根本取不到目标元素。
• 时机与作用域错误：str定义在页面加载时，且在document.ready外部，就算选择器正确，也只能拿到第一个.flip的内容，无法对应点击的具体项。
• jQuery对象调用原生属性错误：jQuery对象不能直接用.innerHTML，应该用.text()或.html()方法获取内容。

修改后的代码 #

JavaScript

$(document).ready(function() {
  $(".flip").click(function() {
    // 获取当前点击元素的文本内容
    var str = $(this).text();
    console.log(str); // 现在会输出点击的123/456/789

    $.get("panel.php?id=" + str, function(response) {
      console.log("Response: " + response);
      $(".panel").slideToggle("slow");
    });
  });
});

关键修改说明

1. 将str的定义移到点击事件内部，用$(this)指代当前被点击的.flip元素，确保每次点击都获取对应项的内容。
2. 用jQuery的.text()方法获取元素文本（若需HTML内容可换用.html()），替代错误的.innerHTML。
3. 移除页面加载时错误的选择器和str定义，解决作用域与时机问题。

额外优化建议 #

• 如果传递的是业务ID而非展示文本，建议给每个span添加data-id属性，比如：

  <span class="flip" data-id="123">123</span>
  

  然后用$(this).data('id')获取ID，避免文本含特殊字符导致URL参数异常。
• 在panel.php中，务必对$_GET['id']做安全校验（如过滤、转义），防止注入攻击。

内容的提问来源于stack exchange，提问作者Brad