JS添加+10然后排序DIV

时间:2016-05-22 10:05:56

标签: javascript

GOAL脚本返回20,13,12,11

您好我正在尝试将这两个操作转换为Load上的单个操作。 加载时页面返回 3,2,10,1 所以我添加了一个按钮来触发+10功能。 返回 13,12,20,11

这两个功能都是独立工作的,但我需要整个工作以便在负载时返回20,13,12,11

我不想要任何按钮>>>>

<script src="js/jquery-1.4.1.min.js"></script>
  <!--CSS-->
 <style type="text/css">
    .box {
    border: 1px solid #000;
    padding: 2px;
    margin: 2px;
}
  </style>
  <!--JAVASCRIPT-->
  <!-- (A) ADDS +10 to div No-->
  <script type='text/javascript'>
  $(document).ready(function(){
  $("#increase").click(function(event){     
    $("div.box").each(function(idx,elem){
      $(this).text( parseInt($(this).text(),10) +10 );
    });
    return false;
    });
});
</script>
  <div id="containerSort">
  <!-- (B) SORTS div -->
  <script type='text/javascript'>
$(function(){
var $divs = $("div.box");

$( "#numBnt" ).one("load", function() {
console.log('loaded')
var numericallyOrderedDivs = $divs.sort(function (a, b) {
    return $(a).find("h7").text() < $(b).find("h7").text();
});
$("#containerSort").html(numericallyOrderedDivs);
});
}); 
 </script>
<!--HTML-->
<div class="box"><h7>1</h7></div>
<div class="box"><h7>2</h7></div>
<div class="box"><h7>3</h7></div>
<div class="box"><h7>10</h7></div>

<img src="http://myscot.com/ImagesMain/myscotLogoResp120.jpg" id="numBnt"/>
</div>

<button id="increase">+10</button>

window.addEventListener(“load”,function(){...})如何将2个函数组合到事件监听器?

1 个答案:

答案 0 :(得分:0)

有两种方法可以解决您的问题

  • 在页面加载时调用按钮的点击事件。
  • 创建一个函数,它将包装所有内容并将其指定为eventListener。

注意:

  • $(function(){})$(document).ready()的简写,拥有多个 document.ready 函数是一种不好的做法。

  • H7不是@Niet the Dark Absol所提及的有效标头标记。浏览器可能会将其视为自定义元素,并且过程类似于span标记。 (这只是猜测)。

  • 代码如下:

$("div.box").each(function(idx, elem) {
  $(this).text(parseInt($(this).text(), 10) + 10);
});

这将使多个DOM操作。在循环中操作DOM的不良做法。

以下是示例代码。我也稍微更新了你的代码。

JSFiddle

&#13;
&#13;
$(document).ready(function() {
  $("#increase").trigger("click");
});

$("#increase").click(function() {
  var valArr = getValues();
  valArr = addNumber(valArr);
  valArr = sortValues(valArr);
  createAndRenderHTML(valArr, "#containerSort");
});

function getValues() {
  var returnArray = [];
  $("div.box").each(function(id, el) {
    returnArray.push(parseInt($(el).text(), 10));
  });
  return returnArray;
}

function addNumber(arr) {
  return arr.map(function(item) {
    return parseInt(item, 10) + 10;
  });
}

function sortValues(arr) {
  return arr.sort(function(a, b) {
    return a > b ? -1 : a < b ? 1 : 0
  });
}

function createAndRenderHTML(arr, el) {
  var _html = arr.map(function(item) {
    return "<div class='box'> <h7>" + item + "</h7></div>"
  }).join("");
  $(el).html(_html);
}
&#13;
.box {
  border: 1px solid #000;
  padding: 2px;
  margin: 2px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div id="containerSort">
  <!--HTML-->
  <div class="box">
    <h7>1</h7>
  </div>
  <div class="box">
    <h7>2</h7>
  </div>
  <div class="box">
    <h7>3</h7>
  </div>
  <div class="box">
    <h7>10</h7>
  </div>

  <img src="http://myscot.com/ImagesMain/myscotLogoResp120.jpg" id="numBnt" />
</div>

<button id="increase">+10</button>
&#13;
&#13;
&#13;