Javascript自定义排序功能取决于用户输入
Javascript custom sort function depending on user input
我正在尝试为Javascript array.sort
方法制作一个自定义的比较回调函数。它应该根据用户输入返回一个值。
当调用该回调函数时,它应该等待用户单击按钮。根据点击的按钮,函数会知道两个元素中哪一个更大,并返回相应的结果(1或-1)。
我知道等待用户输入的唯一方法是使用事件侦听器函数,但我不知道如何将其调整为必须传递给array.sort()
方法的自定义函数。
这是我正在尝试使用的代码;我知道这个代码不起作用:
var array=["a","b","c"];
array.sort(function(a,b){
var result;
$("#button1").click(function(){
result = 1;
});
$("#button2").click(function(){
result = -1;
});
return result;
}
我开始认为不可能将array.sort
函数用于此目的。
有办法做到这一点吗?
您可以使用窗口.confirm方法来完成这项操作,该方法的行为是等待代码的进一步执行,直到用户选择OK或Cancel:关闭弹出窗口
array=["a","b","c"];
array.sort(function(a,b){
var a_before_b = confirm("'" + a + "' will be sorted before '" + b
+ "'. Cancel to order differently.");
return a_before_b ? -1 : 1;
});
document.body.innerHTML = '<p>Array sorted: ' + array + '</p>';
<p>You will get 2 to 3 pop up dialogs to sort [a, b, c]</p>
要让用户通过正常的交互而不是通过模态对话框来回答,并且仍然使用标准的排序方法,这是一项更艰巨的任务。
一个想法是保留一个给出的答案列表,每次有新答案时重复排序,通过排序回调函数提供这些答案。
一旦出现一个尚未给出答案的比较,您就会将该比较呈现给用户,并用任何顺序完成其余的排序。排序后的数组将被忽略,直到您获得所有比较的所有答案为止。
代码相当长,主要是因为与页面的交互:
var array = ['a', 'b', 'c'];
var answers = [];
var questionTemplate = "Order '#' before or after '#'?";
var answerTemplate = "The array is sorted. Result: #.";
function logMsg(msg) {
$($('#log')[0].insertRow(-1).insertCell(-1)).text(msg);
}
function answer(order) {
// keep track of answers
answers.push(order);
// show answers also in a log table
logMsg($('#question').text() + ' - ' + (order<0? 'Before' : 'After'));
askNext();
}
function askNext() {
var arrayCopy = array.slice(0); // take real copy
var questionNo = -1;
arrayCopy.sort(function(a,b){
questionNo++
if (questionNo < answers.length) {
// we already asked this, so use that answer
return answers[questionNo];
}
if (questionNo == answers.length) {
// put question to user:
$('#question').text(questionTemplate.replace('#', a).replace('#', b));
}
// don't care for now, just finish it. We need first to
// get an answer, and will then restart the sort.
return -1;
});
if (array.length == answers.length) {
// Array is now sorted according to answers:
// Hide question section
$('#questionDiv').hide();
// Show the result
logMsg(answerTemplate.replace('#', arrayCopy));
}
}
function reset() {
$('#array').text(array);
$('#questionDiv').show()
$('#log').html(''); // empty log table
answers = [];
askNext();
}
// Set up click handlers
$('#reset').click(reset);
$('#before').click(answer.bind(null, -1));
$('#after').click(answer.bind(null, 1));
reset();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The array <span id="array"></span> will be sorted by asking you questions:</p>
<table id="log"></table>
<div id="questionDiv">
<p id="question" style="font-weight: bold"></p>
<button id="before">Before</button><button id="after">After</button>
</div>
<button id="reset">Restart</button>
相关文章:
- 使用javascript搜索具有用户输入的数组
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何使用JavaScript中的用户输入创建序列/序列
- 如何在用户输入时实例化数组
- 如何从客户端的数组中获取用户输入和返回值
- 如何在用户输入 javascript 时更改值
- 如何从多个不同的html页面获得mongodb文档的用户输入
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如果用户输入的长度小于最小长度,则显示错误消息
- 随机生成用户输入
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- Javascript:使用用户输入搜索数组
- 根据用户输入的数字生成文本框
- 如何通过获取用户输入和使用按钮来运行JavaScript函数
- 使用用户输入修改链接
- 如何解决取消抖动的用户输入上的竞争条件
- 从用户输入中制作数组动画,如打字机(javascript)
- 如何在视图中保存用户输入内容,并在离开页面时对控制器进行后期调用