javascript - 取消链接中 onClick 触发的 javascript 函数

Question

我的页面有一个包含 20 个选择属性的表单，就表单的意义而言，这些属性分为 10 个相关对。

我让用户能够通过依赖于 jQuery 的 JavaScript 来随机化 10 对中每一对的选项。

选择的随机化效果很好。单击其中一个“随机”链接将随机化相关对，而其他选择对保持原样。

问题出在链接上的 onClick 警报/检查中:因为链接始终“监听”点击，即使用户点击“取消”，选择的随机化仍然存在发生。

我正在寻找一种能够在链接上放置警报的方法，如果选择“取消”或类似的选项，该方法将使用户能够停止触发随机化功能。

我的 javascript 编码技能不是很好，但我猜测内联链接代码可能无法为此进行修改，因为链接始终“监听”任何类型的点击，并且 javascript函数本身必须进行更改，才能在链接中放置警报，从而可以取消随机化或允许其继续进行。

jQuery(document).ready(function() {

  jQuery("#randomSelect1").click(function() {
    var select = document.getElementById('pair_1_phrase');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;

    var select = document.getElementById('pair_1_descriptor');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
  });

  jQuery("#randomSelect2").click(function() {
    var select = document.getElementById('pair_2_phrase');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;

    var select = document.getElementById('pair_2_descriptor');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
  });

  //8 more pairs like this..

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="pair_1_phrase" id="pair_1_phrase">
  <option value="0">State</option>
  <option value="1">Condition</option>
  <option value="2">Health</option>
  <option value="3">Strength</option>
</select>

<select name="pair_1_descriptor" id="pair_1_descriptor">
  <option value="0">moderate</option>
  <option value="1">great</option>
  <option value="2">good</option>
  <option value="3">superior</option>
</select>

<p><a onClick="return confirm('Randomise these selects?');" id="randomSelect1" href="#">Randomise</a></p>


<select name="pair_2_phrase" id="pair_2_phrase">
  <option value="0">Requirement</option>
  <option value="1">Need</option>
  <option value="2">Lack</option>
  <option value="3">Necessity</option>
</select>

<select name="pair_2_descriptor" id="pair_2_descriptor">
  <option value="0">urgent</option>
  <option value="1">pressing</option>
  <option value="2">extreme</option>
  <option value="3">crucial</option>
</select>

<p><a onClick="return confirm('Randomise these selects?');" id="randomSelect2" href="#">Randomise</a></p>

<!-- 8 more pairs like this.. -->

Answer 1

如果我的理解正确，您应该将confirm移动到click事件 block ，见下文:

jQuery("#randomSelect1").click(function () {
    if(confirm('Randomise these selects?')) {
        var select = document.getElementById('pair_1_phrase');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;

        var select = document.getElementById('pair_1_descriptor');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
    }
    // else ...
});

当然，删除内联confirm

<p><a id="randomSelect1" href="#">Randomise</a></p>

以下与您的问题无关，但您可以通过重构代码来使您的生活更轻松，如下所示:

var randomizeSelect = function($select) {
  var $items = $select.find('option'),
      index = Math.floor(Math.random() * $items.length);

    $select[0].selectedIndex = index;
}

var randomize = function(id) {
  if(confirm('Randomise these selects?')) {
    randomizeSelect($('#pair_' + id + '_phrase'));   
    randomizeSelect($('#pair_' + id + '_descriptor'));    
  }
}

jQuery("#randomSelect1").click(function() {
  randomize(1);
});

jQuery("#randomSelect2").click(function() {
  randomize(2);
});

您可以做更多的事情，例如添加一个data-id，然后在[data-id]上绑定(bind)一次click事件，正如我在 this pen 中所做的那样