Отмена функции javascript, которая запускается из onClick в ссылке - PullRequest
Новая
       29

Отмена функции javascript, которая запускается из onClick в ссылке

2 голосов
/ 17 января 2020

Моя страница имеет форму с 20 выбранными атрибутами , которые, по смыслу формы, сгруппированы в 10 связанных пар.

Я дал пользователям возможность рандомизировать варианты для каждая из 10 пар зависит от jQuery javascript.

Рандомизация выбора работает отлично. Нажатие на одну из ссылок «Рандомизировать» приведет к рандомизации рассматриваемой пары, в то время как другие пары выбора останутся без изменений.

Проблема в предупреждении / проверке 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.. -->

Ответы [ 3 ]

1 голос
/ 17 января 2020

Вот более простая версия

  1. Обертывание каждого набора в контейнере, здесь div
  2. Перемещение относительно этого контейнера
  3. Отмена ссылки нажмите

Сценарий здесь будет работать с любым количеством наборов фраз / дес c, установленных в select 

$(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>
1 голос
/ 17 января 2020

Если я вас правильно понял, вы должны переместить блок событий 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, затем привязать событие click один раз к [data-id], как я делал в этой ручке

0 голосов
/ 17 января 2020

Обычно рандомизация должна происходить в результате подтверждения, поэтому вы должны либо иметь слушателя и сделать 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 таких пар ..

Обычно это означает, что есть область для оптимизации, например, вы можете поместить значения в некоторый массив, чем использовать javascript l oop через него и динамически добавлять каждый select в DOM.

...