jQuery中如何在双引号内使用数据属性变量？滑块跳转问题求助

我一眼就看出问题出在选择器字符串的拼接错误上——你不小心在选择器外层多套了一层不必要的双引号，导致jQuery无法正确解析目标元素的选择器。

原代码的问题点 #

看你这段代码：

$(".slide_keyUp").change(function(){ 
  var slideNo = $(this).val(); 
  $('"#slider ul li[data-value='+ slideNo +']"').prependTo("#slider ul"); 
})

这里的选择器被写成了'"#slider ul li[data-value='+ slideNo +']"'，相当于生成的选择器是带双引号包裹的（比如"#slider ul li[data-value=1]"），而jQuery的选择器语法里根本不需要给整个选择器加引号，这就导致它找不到任何匹配的元素。

而你手动写$("#slider ul li[data-value='0']")时能生效，是因为这个选择器的语法完全正确——没有多余的外层引号，属性值的单引号也是规范的写法。

修正后的代码 #

基础修复版

先移除多余的双引号，保证选择器语法正确：

$(".slide_keyUp").change(function(){ 
  var slideNo = $(this).val(); 
  $('#slider ul li[data-value=' + slideNo + ']').prependTo("#slider ul"); 
})

更健壮的优化版

为了避免slideNo包含特殊字符（比如空格、引号）时出现语法问题，建议给属性值加上双引号包裹：

$(".slide_keyUp").change(function(){ 
  var slideNo = $(this).val(); 
  $('#slider ul li[data-value="' + slideNo + '"]').prependTo("#slider ul"); 
})

ES6+ 简洁版

如果你的项目支持ES6语法，用模板字符串可以让代码更易读，减少拼接出错的概率：

$(".slide_keyUp").change(function(){ 
  const slideNo = $(this).val(); 
  $(`#slider ul li[data-value="${slideNo}"]`).prependTo("#slider ul"); 
})

验证小技巧 #

你可以在change事件里加一行console.log(slideNo)确认值能正确获取，再打印生成的选择器字符串，就能直观看到之前的错误——比如值为0时，原代码生成的是"#slider ul li[data-value=0]"，而正确的应该是#slider ul li[data-value="0"]（或不带属性值引号的规范版本）。

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