Question

首先我想说我是JavaScript和Jquery的新手，所以希望这很简单，

我有一些JS代码来安排几个div标签的顺序，这些标签可以在JSfiddle（http://jsfiddle.net/databass/Yh2L3/）中运行

然而，当我尝试将其放入网页时，没有任何事情发生

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing</title>


    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>
$('button').on('click', function (event) {
var divElements = $('#tours div'),
    sortType = $(this).data('sort');

divElements.sort(function (a, b) {

    a = $(a).data(sortType);
    b = $(b).data(sortType);

// compare
    if (a > b) {
        return 1;
    } else if (a < b) {
        return -1;
    } else {
        return 0;
    }
});

$('#tours').empty();
$.each(divElements, function (i, divElement) {
    $('#tours').append(divElement.outerHTML);
});

});

  </script>

</head>

<body>

<button data-sort='price'>Sort By Price</button>
<button data-sort='duration'>Sort By Duration</button>
<button data-sort='name'>Sort By Name</button>
<section id="tours">
<div class="result" data-price="749" data-duration="8" data-name="Basecamp">Info about tour 1 goes here</div>
<div class="result" data-price="2099" data-duration="19" data-name="Cycle Adventure">Info about tour 2 goes here</div>
<div class="result" data-price="1099" data-duration="25" data-name="Family Adventure">Info about tour 3 goes here</div>
<div class="result" data-price="3014" data-duration="18" data-name="Luxury Basecamp">Info about tour 4 goes here</div>
</section>

</body>
</html>

非常感谢你的帮助

Answer 1

在将元素添加到javascript之前执行的DOM代码。您需要将javascript代码放在body结束标记之前或document.ready

中

传递给.ready（）的处理程序保证在执行之后执行 DOM准备好了，所以这通常是附加所有其他内容的最佳位置事件处理程序并运行其他jQuery代码jQuery docs

JS不会在页面中执行（在jsfiddle中工作）

1 个答案: