jquery - 使用 jquery undefined variable ；可能的格式冲突

Question

需要一点帮助。看起来很简单，但我一定错过了一些东西。我试图在单击 anchor 标记时检索一些 id 值。由于某种原因，我没有得到所有的值。我认为数据格式存在冲突。这是代码

jquery

已编辑以反射(reflect) Jai 的推荐 - 相同的结果

$j(document).ready(function() { 

  // find value of id and name
  $j(".dig").on("click", function(e) {
        var scheduleID = ($j(this).attr('id'));
            console.log(scheduleID);
        var scheduleTime = ($j(this).closest("div").attr('id'));
            console.log(scheduleTime);
        var scheduleDay = ($j(this).closest("li").attr('id'));
            console.log(scheduleDay);
        var day, times;
      $j( "#show-form" ).dialog( "open" );
        $j("#scheduleID").val(scheduleID);   
        $j("#scheduleTime").val(scheduleTime);        
        $j("#scheduleDay").val(scheduleDay);   
            day     =  $j("#scheduleDay").val();
            times   =  $j("#scheduleTime").val();
        $j('#scheduleWarning').html('<p>NOTE: if you upload an MP3 file for your episode below, it will be put into the ' + day + ' ' + times + ' programming slot. Be sure to select ' + day + ' ' + times + ' to sync this episode with your audio file</p>');
     }); 

html

<li id="Monday">
    <div id="#x#:00" class="time">
        <a id="#ID#" class="icon icon-primary material-icons-backup icon-sm icon-backup dig" style="cursor:pointer" title="upload show"></a>&nbsp;&nbsp;&nbsp;Monday #x#:00
    </div>
</li>

所以...控制台显示了 html 中的所有三个 id，但 #scheduleWarning html 输出未显示“times”var 值。它说它是未定义。

变量 #x# 是 Coldfusion 根据数据库查询生成的索引值。生成的示例如下。

 <div id="21:00" class="time">

知道为什么“times”变量显示为未定义吗？

只是我的调试结果的一小部分。如果我改变

$j("#scheduleDay").val(scheduleDay); 

至

$j("#scheduleDay").val(scheduleTime);

“day”变量显示了正确的值

var scheduleTime = ($j(this).closest("div").attr('id'));

我希望我没有让任何人感到困惑。

Answer 1

这恰好被称为变量提升。当你声明任何变量时，它会被 javascript 编译器提升到顶部。因此，此时该值由于未设置而处于未定义状态。相反，你可以这样做:

$j(document).ready(function() {
  // find value of id and name
  $j(".dig").on("click", function(e) {
    var scheduleID = ($j(this).attr('id'));
    var scheduleTime = ($j(this).closest("div").attr('id'));
    var scheduleDay = ($j(this).closest("li").attr('id'));
    var day, times; // <--------------------------------declare it here.

    $j("#show-form").dialog("open");
    $j("#scheduleID").val(scheduleID);
    $j("#scheduleTime").val(scheduleTime);
    $j("#scheduleDay").val(scheduleDay);
    day = $j("#scheduleDay").val();
    times = $j("#scheduleTime").val();
    $j('#scheduleWarning').html('<p>NOTE: if you upload an MP3 file for your episode below, it will be put into the ' + day + ' ' + times + ' programming slot. Be sure to select ' + day + ' ' + times + ' to sync this episode with your audio file</p>');
  });
});