如何从javascript函数内部调用jquery buttonclick函数

Question

我在jquery中拥有magnified popup函数，该函数提供了按钮div test-popup中给定test的{​​{1}}效果。.

i want放大了当我when i call javascript function发生caller() click button go时div测试弹出窗口的弹出效果。

如何实现？

function caller() {
  $.magnifiedeffect();
};

$.magnifiedeffect = function() {

};

var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
  items: {
    src: theControl,
  },
  type: 'inline',
  mainClass: 'mfp-zoom-in mfp-with-anim', // this class is for CSS animation below
  zoom: {
    enabled: true, // By default it's false, so don't forget to enable it

    duration: 300, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function

    // The "opener" function should return the element from which popup will be zoomed in
    // and to which popup will be scaled down
    // By defailt it looks for an image tag:

  }
});

html,
body {
  margin: 0;
  padding: 10px;
  -webkit-backface-visibility: hidden;
}


/* text-based popup styling */

.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width: auto;
  max-width: 400px;
  margin: 0 auto;
}


/* ====== Zoom effect ======*/

.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}

.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}

.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<input type="button" value="go" onclick=" caller();">
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>

Answer 1

您可以模拟对元素的点击并使用.click()触发所有相应的事件。

function caller() {
  $('#clickMe').click();
};

var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
  items: {
    src: theControl,
  },
  type: 'inline',
  mainClass: 'mfp-zoom-in mfp-with-anim', // this class is for CSS animation below
  zoom: {
    enabled: true, // By default it's false, so don't forget to enable it

    duration: 300, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function

    // The "opener" function should return the element from which popup will be zoomed in
    // and to which popup will be scaled down
    // By defailt it looks for an image tag:

  }
});

html,
body {
  margin: 0;
  padding: 10px;
  -webkit-backface-visibility: hidden;
}


/* text-based popup styling */

.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width: auto;
  max-width: 400px;
  margin: 0 auto;
}


/*

        ====== Zoom effect ======

        */

.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}

.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}

.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<input type="button" value="go" onclick=" caller();">
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>