javascript - 元素切换效果是否可以依赖于许多元素的变化？

Question

请保持温和，因为我是 JQuery 的新手，但我正在尝试编辑一些现有代码(由其他人编写)，这些代码使用 JQuery 切换来呈现一些带有显示/隐藏触发器的 HTML。它工作正常，但我现在需要扩展它，以便根据页面上方 2 个元素的条件触发特定的 DIV。目前，它正在对单个元素(即只有一个条件属性)进行很好的监听。

我的问题是什么是最好的方法来做到这一点并根据来自页面上方 2 个元素的 EITHER 的输入来打开/关闭单个 DIV？

========

这是我想在触发时通过将类更改为“optional-section-open”来打开/关闭的 DIV 部分...

<div
  class="optional-section"
  data-condition="elementOne_input elementTwo_input"> 
...

这是现在设置切换的 JQuery 部分，但我遇到的问题是仅应用了第二个触发器(即覆盖第一个触发器)...

var dataConditionArray = this.$content.data('condition').split(" ");
    for (var index = 0; index<dataConditionArray.length; ++index) {
      this.$toggle = document.getElementById(dataConditionArray[index]);
      if (this.$toggle !== null) {
        this.$toggle = $(this.$toggle);
      } else {
        return false;
      }
    }

==========

非常感谢任何帮助。

谢谢， 森林SDMC

Answer 1

在您的 if 内(切换之前的那个)，您必须具备所有条件。

此外，您应该跟踪“控制”元素可见性的所有元素的变化。

这是一个例子

$('input').keyup( function() {

  var $d = $( 'div' );
  var $input_0 = $( 'input:eq(0)' );
  var $input_1 = $( 'input:eq(1)' );

  
  if( $input_0.val() && $input_1.val() )
  {
    $d.css('color', '#090').text('Both have text');
  } 
  else if( $input_0.val() || $input_1.val() ) 
  {
    $d.css('color', '#900').text('One has text');
  }
  else
  {
    $d.css('color', '#CCC').text('None has text');
  }
}).keyup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Fille the text fields and notice the text below</p>

<input/><input/>

<div></div>