Question

我有一个只有一个元素的数组（最终我会扩展数组）。在一开始，弹出数组中的元素，然后程序发现元素与＆＃34; F2＆＃34;，匹配，然后球出现。但是，球确实没有出现。我关心我的js代码因为我一起使用JS和jQuery。即使我可以将jQuery视为JS的库，但我不确定这是否是问题所在。我调试JS代码的方法是抛出一堆alert()并尝试找到哪条线alert()没有被调用，所以我知道有问题，但我再一次，我不确定如果它是最好的，因为JS中没有IDE。

＆＃13;

$(document).ready(function() {
  var notes = ["F2"];
  if($("#" + notes.pop()).innerHTML == "F2") {
    $("#F2").addClass("shown")
  } else {
    $("#F2").removeClass("shown");
  }
});

＆＃13;

#F2 {
  width: 10px;
  height: 10px;
  background: #ccc;
  border: 2px solid #ccc;
  border-radius: 50%;
}

.not_shown {
  display: none;
}

.shown {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="ball">
  <div id="F2" class="not_shown"></div>
</div>

＆＃13;

Answer 1

我在代码中看到了一些问题。

首先$('#' + notes.pop()).innerHTML不正确。它应该是$('#' + notes.pop()).html()。

其次，F2中没有文字div。所以($('#' + notes.pop()).html() == 'F2')将永远失败。

我稍微修改了一下。

#F2 {
  width: 10px;
  height: 10px;
  background: #ccc;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.not_shown {
  display: none;
}
.shown {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="code.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="code_js.js"></script>
</head>

<body>
  <div id="ball">
    <div id="F2" class="not_shown">F2</div>
  </div>
</body>

</html>
<script>
  $(document).ready(function() {
    var notes = ["F2"];
    debugger;
    if ($('#' + notes.pop()).html() == 'F2') {
      $('#F2').addClass('shown')
    } else {
      $('#F2').removeClass('shown');
    }

  });
</script>

Answer 2

从你的问题我明白你想要弹出数组元素并将其与“F2”进行比较。如果它匹配，那么你想要改变div类。

以下是更正后的javascript代码。

$(document).ready(function() {
  var notes = ["F2"];
  if(notes.pop() === 'F2') {
    $('#F2').addClass('shown')
  } else {
    $('#F2').removeClass('shown');
  }
});

您可以在http://jsbin.com/nomavedamo/edit?html,css,js,output

找到工作示例

Answer 3

无需向div添加内容，也无需与div内容进行比较。由于您是通过ID选择的，因此请继续比较ID。

$(document).ready(function() {
    var notes = ['F2'],
      $el;

    // When selecting an element with jQuery, do it just once and
    // then reference it as much as you want
    $el = $('#' + notes.pop());

    // Use strict comparison unless you have an excellent reason not to (rare)
    if($el.get(0).id === 'F2') { // Just compare the ID, not sure why we need to even look at the content here
        $el.addClass('shown');
    } else {
        $el.removeClass('shown');
    }
});

至于调试，你应该使用浏览器DevTools来逐步完成代码。这样，您可以检查特定执行点的值，以便于调试。

修改：Fiddle with working code

Answer 4

$(document).ready(function() {
    var notes = ["F2"];
    if($('#' + notes.pop()).innerHTML == 'F2') {
        $('#F2').addClass('shown')
    } else {
        $('#F2').removeClass('shown');
    }

});

我想你错过了选择器中的＃

Answer 5

你误解了“内部HTML”的使用情况。所以你可以试试这个。

＆＃13;

$(document).ready(function() {
    var notes = ["F2"];
    if($('#' + notes.pop()).length) {
        $('#F2').addClass('shown')
    } else {
        $('#F2').removeClass('shown');
    }

});

＆＃13;

顺便说一句，最好使用chrome dev工具来调试js，比如设置断点等等。：）

JS函数似乎没有被调用

5 个答案: