如何通过jQuery点击事件动态修改被点击元素的内容？

嘿，我一眼就发现你代码里的小问题啦！你现在用$("#elementID")其实是在找**id严格等于"elementID"**的元素，而不是你存在变量elementID里的那个实际ID值——变量被你当成字符串字面量写在选择器里了，这就导致找不到正确的元素，自然没法修改内容。

给你两种简单的解决方案：

方案1：直接用$(this)（最推荐） #

既然你已经在点击事件的回调函数里，this就指向当前被点击的<td>元素，直接用它来操作就行，不用再通过ID去DOM里重新查找，效率更高：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("td").click(function(){
    var elementID = $(this).attr('id');
    alert(elementID); // 正常获取ID
    $(this).text("X"); // 直接操作当前点击的元素
  });
});
</script>

方案2：正确拼接ID选择器 #

如果你一定要通过ID来操作（比如后续有其他逻辑需要用到ID），记得把变量和#拼接成正确的选择器字符串：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("td").click(function(){
    var elementID = $(this).attr('id');
    alert(elementID); // 正常获取ID
    $("#" + elementID).text("X"); // 把变量拼到选择器里
  });
});
</script>

简单总结一下：当你要在jQuery选择器里用变量时，不能把变量放在引号内，要通过字符串拼接的方式把变量值融入选择器，或者更直接地利用事件回调里的this来指代当前元素，这样既简洁又高效~

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