为什么这在 jQuery UI 3.3.1 或 1.9.1 中不起作用，但仅在 1.9.2 中起作用？

Question

在寻找通过勾选复选框来切换文本框的解决方案时，我在 Whosebug 的另一个 post 中遇到了这个 fiddle。

html

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
  <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
  Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>

<input type="checkbox" id="run_effect" name="run_effect"> Click to execute effect

javascript+jquery

function runEffect() {
  // get effect type from
  var selectedEffect = 'slide';

  // most effect types need no options passed by default
  var options = {};
  // some effects have required parameters
  if ( selectedEffect === "scale" ) {
    options = { percent: 0 };
  } else if ( selectedEffect === "size" ) {
    options = { to: { width: 200, height: 60 } };
  }

  // run the effect
  $( "#effect" ).toggle( selectedEffect, options, 500 );
};

 $( "#effect" ).toggle( false );
// set effect from select menu value
$("#run_effect").click(function(){
    if($('#run_effect').is(':checked')){
        runEffect();
    }else{
        runEffect();
    }
});

css

.toggler {
    width: 500px;
    height: 200px;
  }
  #button {
    padding: .5em 1em;
    text-decoration: none;
  }
  #effect {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
  }
  #effect h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
  }

fiddle 只能使用 jQuery 1.9.2。我用3.3.1、1.9.1试过了，都不行。

所以，我的第一个问题是：怎么样？

第二个问题是：如何使用 3.3.1 使其工作？

请记住，我不是前端开发人员，所以这一切对我来说就像 "chinese"。

Answer 1

您需要包含 jQuery 以及 CSS 和 jQuery UI 的脚本。示例（见 HTML 顶部）

现在why/how在那里使用jsfiddle，这是他们的设计决定，不包括jquer UI切换，而其他版本是1.9.1之外的其他版本jQuery版本。

注意：这回答了你的问题。

现在我玩得很开心并连接了你的 select/checkbox 并添加了一个按钮以在单击时显示所选效果。从条件中创建一个对象并使用它，在这里随意使用 "answer"。它仍然会触发 "change" 事件 - 通过单击按钮，因此如果未选中它不会显示任何效果，只会在那里执行 show/hide 基本 jQuery。

function runEffect(pick, choice) {
  // get effect type from
  var selectedEffect = choice.val(); //'slide';
  // console.log(selectedEffect);
  let defaultOptions = {
    duration: 500,
    scale: {
      options: {
        percent: 0
      }
    },
    size: {
      options: {
        to: {
          width: 200,
          height: 60
        }
      }
    }
  };
  let options = defaultOptions[selectedEffect] ? (defaultOptions[selectedEffect].options ? defaultOptions[selectedEffect].options : {}) : {};
  // run the effect IF checked?
  if (pick) {
    $("#effect").toggle(selectedEffect, options, defaultOptions.duration);
  } else {
    // just basic jquery hide/show toggle
    $("#effect").toggle();
  }
};
// this is an alias for and the same as $("#effect").hide();
$("#effect").toggle(false);

// set effect from select menu value
// this is better with '.on(' and should use "change" not click
$("#run_effect").on('change', function() {
  let me = $(this).is(':checked');
  let choice = $('#effectTypes');
  runEffect(me, choice);
});
$("#show-effect").on('click', function() {
  $("#run_effect").trigger('change');
});

.toggler {
  width: 500px;
  height: 200px;
}

#button {
  padding: .5em 1em;
  text-decoration: none;
}

#effect {
  position: relative;
  width: 240px;
  height: 135px;
  padding: 0.4em;
}

#effect h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide" selected>Slide</option>
</select>
<label>
<input type="checkbox" id="run_effect" name="run_effect"> Click to execute effect javascript+jquery</label>
<button type="button" id="show-effect">Do Effect Show</button>

为什么这在 jQuery UI 3.3.1 或 1.9.1 中不起作用，但仅在 1.9.2 中起作用？

How is it this won't work in either jQuery UI 3.3.1 or 1.9.1, but works in 1.9.2 only?

jquery

jquery-ui

toggle