我想知道如何从在焦点模糊事件中触发的元素（使用click事件）获取价值。我创建类似于jQuery datepicker的图标选择器。这里是代码，但是当我单击图标时，日期选择器元素隐藏而没有给出值。
PHP代码
<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
<div class="iconpicker-wrapper">
<table class="dt-icons">
<?php
foreach (array_chunk($icons, 5, true) as $icon_cunk) {
echo '<tr>';
foreach($icon_cunk as $key => $ico) {
echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>';
}
echo '</tr>';
}
?>
</table>
</div>
</div>
Java脚本
$("#contentIcon").keypress(function (e) {
e.preventDefault();
});
$(document).on('click', '#iconPicker table.dt-icons td', function () {
$('#contentIcon').empty();
var _dtself = $(this);
document.getElementById("contentIcon").value = _dtself.data('value');
});
$('#contentIcon').focus(function() {
$('#iconPicker').show();
}).blur(function() {
$('#iconPicker').hide();
});
更新
#iconPicker是一个隐藏的（显示：无）元素，用于选择图标。当用户将焦点放在#contentIcon输入字段时将显示它，并在触发模糊事件时将其隐藏起来。如果我删除$('#iconPicker').hide();的blur，甚至处理部分，然后（我格式化这段代码，感谢@Reddy）
$(document).on('click', '#iconPicker table.dt-icons td', function () {
$("#contentIcon").val($(this).data('value'));
});
可以触发并将值放置到#contentIcon输入字段中。但是，#iconPicker没有隐藏回来。如果我$('#iconPicker').hide();在click事件处理程序中使用过，#iconPicker如果用户未选择图标，该图标将不会隐藏。
更新
这里是示例jsfiddle.net
我通过实现@CMS的答案来解决这个问题。经过一些修改后的代码。
PHP的
<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
<div class="iconpicker-wrapper">
<table class="dt-icons">
<?php
$a = 0;
foreach (array_chunk($icons, 5, true) as $icon_cunk) {
echo '<tr>';
foreach($icon_cunk as $key => $ico) {
if ($a == 0) {
echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
}else {
echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
}
$a++;
}
echo '</tr>';
}
?>
</table>
</div>
</div>
Javascript的
$(document).on('keypress keydown', '#contentIcon', function (e) {
e.preventDefault();
});
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement"
&& element.tagName !== "I" && element.className !== "icon-placement") {
$('#iconPicker').hide();
}
};
$(document).on('click', '#iconPicker table.dt-icons td a', function () {
$(".choosed-icon").removeClass("choosed-icon");
$(this).attr("class", "choosed-icon");
$("#contentIcon").val($(this).data('value'));
});
$('#contentIcon').on('click', function () {
$('#iconPicker').show();
$('#iconPicker').focus();
});
这里是演示。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句