Question

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

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使其正常工作？

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

Answer 1

您需要包括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>

这怎么在jQuery UI 3.3.1或1.9.1中都不起作用，而仅在1.9.2中起作用？

1 个答案: