javascript - 单击数据自定义切换，而不是输入

Question

我有这个具有不同字段的搜索元素，还有这个 #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));

如果有人对如何执行此操作有建议或提示，我将不胜感激。

Answer 1

你可以使用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);
        }