我有这个具有不同字段的搜索元素,还有这个 #goal
div。在表单/元素的底部有 2 个按钮 MORE
和 SEARCH
。目标是当用户单击 MORE
以切换类并显示 #goal
的内容,同时如果按下 ENTER
然后应单击 SEARCH
并提交表单。
HTML:
....
<div id="goal" class="well-toggle offset-top-10">
....
</div>
<div class="offset-top-10">
<button data-custom-toggle="#goal" class="btn btn-block btn-white" id="bntMore">
MORE BTN
</button>
</div>
<div class="offset-top-10">
<button class="btn btn-block btn-white" id="btnSearch">SEARCH</button>
</div>
...
这是javascript:
$this.on('click', $.proxy(function (event) {
event.preventDefault();
var $ctx = $(this);
$($ctx.attr('data-custom-toggle')).add(this).toggleClass('active');
setTimeout(function () {
$window.trigger('resize');
}, 1000);
}, $this));
如果有人对如何执行此操作有建议或提示,我将不胜感激。
最佳答案
你可以使用onclick,看例子:
<button data-custom-toggle="#goal" class="btn btn-block btn-white" onclick="clickFunction(this)" id="bntMore">
MORE BTN
</button>
<script>
var clickFunction = function(elem) {
event.preventdefault();
var customToggle = elem.getAttribute('data-custom-toggle');
$(customToggle).add(elem).toggleClass('active');
setTimeout(function () {
$(window).trigger('resize');
}, 1000);
}
</script>
如果您更喜欢遵循最初创建的方式:
<script>
$("[data-custom-toggle]").click(function(){
event.preventdefault();
var customToggle = this.getAttribute('data-custom-toggle');
$(customToggle).add(this).toggleClass('active');
setTimeout(function () {
$(window).trigger('resize');
}, 1000);
});
</script>
或者,如果没有任何效果:
$("[data-custom-toggle]").click(function(){
clickFunction(this);
event.preventdefault();
});
$("[data-custom-toggle]").keydown(function(event){
if (event.keyCode == 13) {
clickFunction(this);
event.preventdefault();
}
});
var clickFunction = function(elem) {
var customToggle = elem.getAttribute('data-custom-toggle');
$(customToggle).add(elem).toggleClass('active');
setTimeout(function () {
$(window).trigger('resize');
}, 1000);
}
关于javascript - 单击数据自定义切换,而不是输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57878760/