取消 link 中从 onClick 触发的 javascript 函数

Question

我的页面有一个包含 20 个 select 属性的表单，就表单的意义而言，它们分为 10 个相关对。

我让用户能够通过 jQuery 相关的 javascript.

随机化 10 对中每一对的选项

selects 的随机化效果很好。单击其中一个 "Randomise" link 将随机化有问题的离子对，而其他 select 离子对保持原样。

问题出在 link 上的 onClick alert/check：因为 link 对于点击总是 "listening"，即使用户点击 "Cancel"，select 的随机化仍然发生。

我正在寻找的是一种能够在 link 上发出警报的方法，如果选择 "Cancel"，这将使用户能够停止触发随机化函数] 或类似的。

我的 javascript 编码技巧不是很好，但我猜测内联 link 代码可能无法为此修改，因为 links对于任何类型的点击总是 "listening"，并且必须更改 javascript 函数本身以允许在 link 中放置一个警报，它可以取消随机化或允许它继续。

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 事件块，见下文：

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] 上绑定一次 click 事件，就像我在 this pen[=20= 中所做的那样]

Answer 2

通常随机化应该在确认结果中发生，所以你应该或者有一个监听器并在其中执行 confirm，或者检查 <a onClick="confirm...:

// a bit optimized way, instead of copy/pasting same code with a different id.
function selectRandomValue(elSelect) {
    var items = elSelect.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    elSelect.selectedIndex = index;
}

// also a bit optimized
function randomizeValuesInBlock(index) {
        var select = document.getElementById(`pair_${index}_phrase`);
        selectRandomValue(select);

        var select = document.getElementById(`pair_${index}_descriptor`);
        selectRandomValue(select);
}

<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="confirm('Randomise these selects?') ? randomizeValuesInBlock(1) : '';" 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="confirm('Randomise these selects?') ? randomizeValuesInBlock(2) : '';" id="randomSelect2" href="#">Randomise</a></p>

回答后：

8 more pairs like this..

通常这意味着有一个优化区域，例如你可以将值放在一些数组中，而不是使用 javascript 循环遍历它并动态地将每个 select 添加到 DOM.

Answer 3

这是一个更简单的版本

将每套包装在一个容器中，这里是 div
相对于此容器导航
取消link点击

此处的脚本适用于 select

上设置的任意数量的 phrase/desc class

$(function() {
  $(".rdn").on("click", function(e) {
    e.preventDefault(); // stop click
    const $parent = $(this).closest("div");
    const $phrase = $parent.find(".phrase");
    const $desc = $parent.find(".descriptor");
    const setText = "Randomise set #"+$phrase.attr("name").split("_")[1]+"?";

    if (!confirm(setText)) return;

    let len;
    let index;

    len = $('option',$phrase).length;
    index = Math.floor(Math.random() * len);
    $phrase[0].selectedIndex = index;

    len = $('option',$desc).length;
    index = Math.floor(Math.random() * len);
    $desc[0].selectedIndex = index;
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select name="pair_1_phrase" class="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" class="descriptor">
    <option value="0">moderate</option>
    <option value="1">great</option>
    <option value="2">good</option>
    <option value="3">superior</option>
  </select>

  <p><a class="rdn" href="#">Randomise</a></p>
</div>

<div>
  <select name="pair_2_phrase" class="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" class="descriptor">
    <option value="0">urgent</option>
    <option value="1">pressing</option>
    <option value="2">extreme</option>
    <option value="3">crucial</option>
  </select>

  <p><a class="rdn" href="#">Randomise</a></p>
</div>

取消 link 中从 onClick 触发的 javascript 函数

Cancelling a javascript function that fires from onClick in a link

javascript

jquery

onclick

cancellation