时间戳

首页 > 解决方案 > 为什么这在 jQuery UI 3.3.1 或 1.9.1 中都不起作用，而只在 1.9.2 中起作用？

jquery - 为什么这在 jQuery UI 3.3.1 或 1.9.1 中都不起作用，而只在 1.9.2 中起作用？

问题描述

在寻找从复选框的勾选中切换文本框的解决方案时，我在 StackOverflow 的另一篇文章中遇到了这个小提琴。

http://jsfiddle.net/67x4bwnr/

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;
  }

小提琴只能使用 jQuery 1.9.2。我用3.3.1、1.9.1试过了，不行。

所以，我的第一个问题是：那是怎么回事？

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

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

标签： jqueryjquery-uitoggle

解决方案

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

现在至于为什么/如何在那里使用 jsFiddle，这是他们的设计决定，即当除了 1.9.1 之外的其他版本是选择的 jQuery 版本时，不包括 jQuer UI 切换。

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

现在我对此有一点乐趣，并连接了您的选择/复选框，并添加了一个按钮以在单击时显示所选效果。从条件句中制作一个对象并使用它，请随意在这里使用“答案”。它仍然会触发“更改”事件 - 通过单击按钮，如果未选中它不会显示任何效果，只是在那里显示/隐藏基本 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>

推荐阅读