我一直在努力做到这一点！任何人都可以帮我将这部分MooTools js脚本转换成jquery吗？该脚本是动态查询构造函数。实时实施在http://opl.bibliocommons.com/search。
我需要转换的脚本如下。我可以理解这个脚本正在做什么，但我不知道可以执行相同工作的等效jquery函数。关于如何处理这个的任何指示表示赞赏。
var AdvancedSearch = new Class({
Implements: [Options],
options: {
disable_form_message: "Editing this field means you won't be able to use the constructor form. Continue?"
},
initialize: function (instance, options) {
this.setOptions(options);
this.instance = $(instance);
this.query_chunks = this.instance.getElements('div.query_chunk');
this.not_chunks = this.instance.getElements('div.not_chunk');
this.instance.addEvent('submit', this.do_search.bindWithEvent(this));
this.term_count = this.query_chunks.length;
this.not_term_count = this.not_chunks.length;
this.query_field = $('custom_query');
if ($('custom_edit').value == 'false') {
this.query_field.removeEvents('focus');
this.query_field.addEvent('focus', this.disable_form_elements.bindWithEvent(this));
}
this.operation = $('operator');
if (this.operation) {
this.operation.addEvent('change', this.construct_query.bindWithEvent(this));
}
this.query_chunks.each(function (el, i) {
el.getElement('select.parameter').addEvent('change', this.construct_query.bindWithEvent(this));
el.getElement('input.operand').addEvent('keyup', this.construct_query.bindWithEvent(this));
el.getElement('input.operand').addEvent('mouseup', this.construct_query.bindWithEvent(this));
el.getElement('a.remove_btn').removeEvents('click');
el.getElement('a.remove_btn').addEvent('click', this.remove_query_part.bindWithEvent(this));
} .bind(this));
this.add_keywords = $('add_query_part');
if (this.add_keywords) {
this.add_keywords.addEvent('click', this.add_query_part.bindWithEvent(this));
}
this.not_chunks.each(function (el, i) {
el.getElement('select.not_parameter').addEvent('change', this.construct_query.bindWithEvent(this));
el.getElement('input.not_operand').addEvent('keyup', this.construct_query.bindWithEvent(this));
el.getElement('input.not_operand').addEvent('mouseup', this.construct_query.bindWithEvent(this));
el.getElement('a.not_remove_btn').removeEvents('click');
el.getElement('a.not_remove_btn').addEvent('click', this.remove_not_part.bindWithEvent(this));
} .bind(this));
this.add_not_keywords = $('add_not_part');
if (this.add_not_keywords) {
this.add_not_keywords.addEvent('click', this.add_not_part.bindWithEvent(this));
}
},
add_query_part: function (ev) {
if (ev) ev.stop();
this.query_chunks[0].addClass('removable');
var query_chunk = this.query_chunks[0].clone().set({ 'class': 'query_chunk query_piece', 'id': "query_chunk_" + (++this.term_count) }).inject($('query_parts'));
var search_param_select = query_chunk.getElement('select').set({
'class': 'parameter',
'id': 'parameter_' + this.term_count,
'style': 'margin-right:3px'
});
var keyword = query_chunk.getElement('input[type=text]').set({
'class': 'operand text',
'id': 'keyword_' + (this.term_count),
'style': 'margin-right:3px',
'value': ''
});
var remove_btn = query_chunk.getElement('a').set({
'class': 'remove_btn',
'id': 'remove_' + (this.term_count)
});
$("query_chunk_" + this.term_count).addClass('removable');
this.query_chunks.push(query_chunk);
remove_btn.addEvent('click', this.remove_query_part.bindWithEvent(this));
keyword.addEvent('keyup', this.construct_query.bindWithEvent(this));
keyword.addEvent('mouseup', this.construct_query.bindWithEvent(this));
search_param_select.addEvent('change', this.construct_query.bindWithEvent(this));
return query_chunk;
},
remove_query_part: function (ev) {
ev.stop();
var remove_index = ev.target.getParent('div').id.split("_")[2];
this.query_chunks.splice(this.query_chunks.indexOf($('query_chunk_' + remove_index)), 1);
if ($('query_chunk_' + remove_index)) {
$('query_chunk_' + remove_index).dispose();
}
this.construct_query();
if (this.query_chunks.length == 1) this.query_chunks[0].removeClass('removable');
},
add_not_part: function (ev) {
if (ev) ev.stop();
this.not_chunks[0].addClass('removable');
var query_chunk = this.not_chunks[0].clone().set({ 'class': 'not_chunk query_piece', 'id': 'not_chunk_' + (++this.not_term_count) }).inject($('not_parts'));
var search_param_select = query_chunk.getElement('select').set({ 'class': 'not_parameter', 'id': "not_parameter_" + (this.not_term_count), 'style': 'margin-right:3px' });
var keyword = query_chunk.getElement('input[type=text]').set({ 'class': 'not_operand text', 'id': 'not_keyword_' + (this.not_term_count), 'style': 'margin-right:3px', 'value': '' });
var remove_btn = query_chunk.getElement('a').set({
'class': 'not_remove_btn',
'id': 'not_remove_' + (this.not_term_count)
});
$("not_chunk_" + this.not_term_count).addClass('removable');
this.not_chunks.push(query_chunk);
remove_btn.addEvent('click', this.remove_not_part.bindWithEvent(this));
keyword.addEvent('keyup', this.construct_query.bindWithEvent(this));
keyword.addEvent('mouseup', this.construct_query.bindWithEvent(this));
search_param_select.addEvent('change', this.construct_query.bindWithEvent(this));
return query_chunk;
},
remove_not_part: function (ev) {
ev.stop();
var remove_index = ev.target.getParent('div').id.split("_")[2];
this.not_chunks.splice(this.not_chunks.indexOf($('not_chunk_' + remove_index)), 1);
$('not_chunk_' + remove_index).dispose();
this.construct_query();
if (this.not_chunks.length == 1) this.not_chunks[0].removeClass('removable');
},
disable_form_elements: function (ev) {
if (confirm(this.options.disable_form_message)) {
disable_form(this);
} else {
ev.stop();
$('advanced_search').getElement('div.queryBox').getElements('input')[1].focus();
}
},
construct_query: function (ev) {
Messages.clear();
var query_string = "";
var part_pattern = "{param}({keyword})";
var not_pattern = "-{param}({keyword})";
var operation_pattern = "{operation}";
if (this.query_chunks.length > 1) {
query_string += "(";
}
var operands = new Array();
for (var i = 0; i < this.query_chunks.length; i++) {
if (this.query_chunks[i].getElement('input.operand').value != "") {
var myObject = {
param: (this.query_chunks[i].getElement('select.parameter').value != "anywhere") ? this.query_chunks[i].getElement('select.parameter').value + ":" : "",
keyword: this.query_chunks[i].getElement('input.operand').value
};
operands.push(part_pattern.substitute(myObject));
}
}
query_string += operands.join(" " + this.operation.value + " ");
if (this.query_chunks.length > 1) {
query_string += ")";
}
var not_operands = new Array();
for (var j = 0; j < this.not_chunks.length; j++) {
if (this.not_chunks[j].getElement('input.not_operand').value != "") {
myObject = {
param: (this.not_chunks[j].getElement('select.not_parameter').value != "anywhere") ? this.not_chunks[j].getElement('select.not_parameter').value + ":" : "",
keyword: this.not_chunks[j].getElement('input.not_operand').value
};
not_operands.push(not_pattern.substitute(myObject));
}
}
if (query_string != "") query_string += " ";
query_string += not_operands.join(" ");
if (query_string != "") query_string += " ";
query_string.trim();
this.query_field.value = query_string;
}
});
function disable_form(o)
{
o.query_field.removeEvents('focus');
$('custom_edit').value = 'true';
$('advanced_search').getElement('div.queryConstructor').addClass('hide');
}
答案 0 :(得分：6)
你可能会更好地看看脚本的功能，并在“grokked”jQuery之后重新实现它。
但如果你想翻译......
您将遇到的第一个挑战是jQuery没有MooTools的Class功能的类似物。我已经完成了Class的实现，它与Prototype（MooTools的基础）非常相似，除了我添加了一个功能，使超级调用显着更高效;你可以在this blog post进行调整。你必须翻译Implements事物（相当肯定，它只是一个超类参数）。
然后：
[]索引到实际的底层DOM元素（例如，在jQuery中） ，var list = $('.xyz');为您提供了一个jQuery实例list，该实例具有length并且可以通过[]索引（list[0]是第一个基础原始DOM元素因此，无论您在MooTools增强型实例上访问DOM元素的原始属性（例如，您从$或$$获得的内容），都可以找到jQuery等效函数或者索引到jQuery对象以获取原始DOM实例。例如，在上面，如果我想要list中第一个匹配的ID，我会做list.attr('id')或（知道我） ）更有可能list[0].id。$('foo')变为$('#foo')（或$(document.getElementById('foo'))，但这很尴尬）。 （只有当它是一个字符串[注意引号];当它是一个DOM对象时，保留它 - 因此是第二种形式。）$$变为$。getElements和getElement都变为find。 （jQuery实际上没有单独包装元素的概念，只是一个只有一个元素的jQuery实例。）addEvent变为bind。removeEvents变为unbind。bind变为proxy。bindWithEvent的直接模拟，但你可能对proxy的使用位置感到满意。仔细检查您是否按照预期的顺序获得参数。.value变为.val()。set可能会变为attr，但使用addClass代替类名。答案 1 :(得分：0)
也许尝试将课程分成更小的块并一次解决一个问题？
在转换时也保留mootools功能，而不是$（）使用“jQuery（）”
例如
function disable_form_jquery(o)
{
jQuery(o.query_field).unbind('focus');
jQuery('#custom_edit').val('true');
jQuery('#advanced_search').children('div.queryConstructor').addClass('hide');
}