昨天我问过类似的问题,但是经过一天的研究,我发现它过于复杂且不够精确,因此我删除了它。
因此,我在这里创建了另一个小提琴,该小提琴在大多数情况下应该是自我描述的。
在下面,您可以找到其中的HTML和JavaScript部分:
<select name="country">
<option value="spain">Spain</option>
<option value="sweden">Sweden</option>
<option value="russia">Russia</option>
<option value="canada">Canada</option>
</select>
<ul class="another-selector">
<li data-value="spain">Spain</li>
<li data-value="sweden">Sweden</li>
<li data-value="russia">Russia</li>
<li data-value="canada">Canda</li>
</ul>
承诺的Javascript在这里:
// Following function is called when 'country_changed' event is triggered
var country_changed = function(event, data) {
$another_selector_items = $('.another-selector')
.children();
$another_selector_items
.removeClass('selected');
$another_selector_items.each(function(index, element) {
var $element = $(element);
if ($element.data('value') == data.country)
$element.addClass('selected');
});
var $select = $('select[name=country]');
$select
.children()
.removeAttr('selected')
.prop('selected', false)
.filter('[value=' + data.country + ']')
.attr('selected', 'selected')
.prop('selected', true);
// ----------------------------------------
// Uncomment this to get infinite recursion:
// ----------------------------------------
//$select.trigger('change');
};
// Register event bound to the document
// (so not attached to any particular element)
$(document)
.on("country_changed", country_changed);
// Bind changing the
$('select[name=country]').on('change', function(event) {
$.event.trigger('country_changed', {
country: $(this).val()
});
});
// Bind clicking on the LI to triggering the event
$('.another-selector').on('click', 'li', function(event) {
$.event.trigger('country_changed', {
country: $(this).data('value')
});
});
// Separate 'change' event binding --- required for 'pretty select' plugin
$('select[name=country]').on('change', function(event, data) {
// ...
});
问题是,当元素都为:事件的侦听器并具有触发相同事件的能力时,我不知道针对这种情况的最佳方法是什么。因此,例如,从本机SELECT
元素中选择一个选项会导致事件触发并LI
在另一个列表上选择适当的元素。但是由于该事件还必须处理反之亦然的情况,因此它还会尝试SELECT
再次更新,这是无用的,更糟糕的是,这会导致无限的复活(希望通过智能浏览器停止)。
尝试在我的小提琴中取消注释JavaScript代码的#46行,以了解我在说什么。
因此,我要寻找的是一种很好的方法来检测事件的来源,然后将其来源从可能的回调列表中排除。
或者-也许我正在尝试使用错误的方法来解决问题?也许我已经花了两天没有读足够的东西?;)
如果可以,请你帮助我。
我将UI生成的事件与代码触发的事件分开。另外,不需要自定义事件和上的2个change
处理程序SELECT
。同样,也无需change
从您的自定义事件中重新触发事件。
我对您的问题的建议是:
$('select[name=country]').on('change', function(event) {
var country = ... /* obtain country */
selectContry(country);
});
$('.another-selector').on('click', 'li', function(event) {
var country = ... /* obtain country */
selectContry(country);
});
function selectContry(country) {
// update view, e.g. SELECT and UL
// ...
// process new selection
// ...
}
简而言之:保持UI事件处理程序简短(标识上下文,即与事件相关的数据)。然后,处理程序应调用实用程序方法(如果需要,通过自定义事件),以更新视图(如果需要)并处理数据。
如果还需要其他事件,则不要(重新)触发与现在新的情况相同的事件,程序状态已更改,并且不同的事件(例如after_x
)更为合适。
如果漂亮的精选插件困扰您,请在更新视图的过程中执行以下任一操作:
update
prettyselect插件的方法:$('select[name=country]').prettyselect('update')
change.ps
事件select
:$('select[name=country]').trigger('change.ps')
看一下源代码,看看它是如何工作的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句