Question

我需要帮助here

@ryanpcmcquen提供了很大的帮助，但作为一个＆＃34; noob＆＃34;在javascript我想知道更多的事情

当我想创建另一个函数时，我该怎么做？

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var unitBlock = document.querySelector('select#unit_block');
  var unitRowBig = document.querySelector('select#unit_row_big');
  var unitRow = document.querySelector('select#unit_row');
  var unitColumn = document.querySelector('select#unit_column');
  var unitSize = document.querySelector('select#unit_size');

  unitBlock.addEventListener('change', function () {
    if (unitBlock.value === 'A') {
      unitRowBig.disabled = false;
      unitRowBig[4].disabled = false;
    } else {
      unitRowBig.disabled = false;
      unitRowBig[4].disabled = true;
    }
  });


  unitBlock.addEventListener('change1', function () {
    if ((unitRowBig.value === '1') && (unitBlock.value === 'A')) {
      unitRow.disabled = false;
      unitRow[8].disabled = true;
      unitRow[9].disabled = true;
      unitRow[10].disabled = true;
      unitRow[11].disabled = true;
      unitRow[12].disabled = true;
    }
  });


});

因为它似乎没有按照我的方式运作。

Answer 1

除了change1不是有效事件之外，无需添加新事件，您可以在此处找到事件列表：

https://developer.mozilla.org/en-US/docs/Web/Events

将该条件放在原始事件处理程序中：

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var unitBlock = document.querySelector('select#unit_block');
  var unitRowBig = document.querySelector('select#unit_row_big');
  var unitRow = document.querySelector('select#unit_row');
  var unitColumn = document.querySelector('select#unit_column');
  var unitSize = document.querySelector('select#unit_size');

  unitBlock.addEventListener('change', function () {

    // You may want to comment out all of this section:
    if (unitBlock.value === 'A') {
      unitRowBig.disabled = false;
      unitRowBig[4].disabled = false;
    } else {
      unitRowBig.disabled = false;
      unitRowBig[4].disabled = true;
    }
    // Down to here.

    // Here's your code!
    if ((unitRowBig.value === '1') && (unitBlock.value === 'A')) {
      unitRow.disabled = false;
      unitRow[8].disabled = true;
      unitRow[9].disabled = true;
      unitRow[10].disabled = true;
      unitRow[11].disabled = true;
      unitRow[12].disabled = true;
    // Including an antithetical clause,
    // to account for the user changing their mind.
    } else {
      unitRow.disabled = true;
      unitRow[8].disabled = false;
      unitRow[9].disabled = false;
      unitRow[10].disabled = false;
      unitRow[11].disabled = false;
      unitRow[12].disabled = false;
    }
  });
});

请注意，我还在disabled子句中包含了相反的else条件，以防用户做出一个选择，然后更改为另一个。

Answer 2

如果你真的需要两个独立的功能（这里不是这种情况），就这样做：

unitBlock.addEventListener('change', function () {
   console.log('First event listener')
});


unitBlock.addEventListener('change', function () {
    console.log('Second event listener')
});

document.addEventListener存储您发送给他的所有函数，因此当触发change事件时，它将按照您传递给它的顺序执行所有这些函数。

简而言之，当触发更改事件时，您将拥有：

> "First event listener"
> "Second event listener"

我希望这能帮到你！

一次javascript多个功能

2 个答案: