Question

温柔的人，因为我是JQuery的新手，但我正在尝试编辑一些现有代码（由其他人编写），这些代码使用JQuery切换呈现一些带有SHOW / HIDE触发器的HTML。它工作正常，但我现在需要扩展它，以便根据页面上方的2个元素的条件触发特定的DIV。目前它正在精心监听单个元素（即只有一个条件属性）。

我的问题是，最好的方法是什么，根据页面上方2个元素的 EITHER 的输入，将单个DIV切换为ON / OFF？

======

这是我希望通过在触发时将类更改为“optional-section-open”来切换ON / OFF的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;
      }
    }

==========

非常感谢任何帮助。

谢谢， ForestSDMC

Answer 1

在你的if（切换前的那个）里面，你必须拥有所有的条件。

此外，您应该跟踪＆＃34;控制＆＃34;的所有元素的变化。元素的可见性。

这是一个例子

＆＃13;

$('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();

＆＃13;

<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>

＆＃13;

Answer 2

一些肮脏的解决方案。你可以从这里拿走它并清理一下：

HTML：

<div>
    <input id="r1" type="radio" name="someName" value="v1">v1</input><br>
    <input id="r2" type="radio" name="someName" value="v2">v2</input><br>
    <input id="r3" type="radio" name="someName" value="v3">v3</input>

    <div class="magick-div" data-condition="r1">Some div 1</div>
    <div class="magick-div" data-condition="r2">Some div 2</div>
    <div class="magick-div" data-condition="r3">Some div 3</div>

    <div class="magick-div" data-condition="r1 r2">Some div 1 2</div>
    <div class="magick-div" data-condition="r2 r3">Some div 2 3</div>
    <div class="magick-div" data-condition="r1 r3">Some div 1 3</div>

    <div class="magick-div" data-condition="r1 r2 r3">Some div 1 2 3</div>
</div>

JavaScript的：

$(document).ready(function(){
    var allRadios = [];

    $('.magick-div').each(function(){        
        var div = $(this);
        var conditionalRadioElements = div.attr('data-condition')
            .split(' ')
            .map(function(id){ return '#' + id})
            .map(function(selector) {return $(selector)});

        allRadios = allRadios.concat(conditionalRadioElements);

        conditionalRadioElements.forEach(function(radio){
            function update(){        
                var anyRadioSelected = conditionalRadioElements.map(function(radio){
                   return radio.is(':checked'); 
                }).reduce(function(acc, selected){
                    return acc || selected;
                });


                if(anyRadioSelected){
                    div.show();   
                }
                else {
                    div.hide();                    
                }
            }

            radio.change(function(){
                allRadios.forEach(function(radio){
                    radio.trigger('magick-update');    
                })
            });

            radio.on('magick-update', update);

            update();
        })
    })
})

JsFiddle链接： http://jsfiddle.net/fwukoj6m/5/

Answer 3

猜测，你的代码只进行第二次触发的原因是你的if语句中的重新分配。

很难看出你的例子是什么意思，但这有用吗？（免责声明我还没有尝试过这个，只是在答案框中输入它，所以可能会有拼写错误）

//Should be a constant somewhere
var CLASS_OPTIONAL_SECTION_OPEN = "optional-section-open";

.....

var dataConditionArray = this.$content.data('condition').split(" ");
var conditionArraySize = dataConditionArray.length - 1;
for (var index = 0; index <= conditionArraySize; ++index) {
    var toggleElement = document.getElementById(dataConditionArray[index]);
    if (toggleElement){
        if (index === conditionArraySize){
            // assuming that this.$toggle refers to the jQuery object you wish to show?
            this.$toggle.toggleClass(CLASS_OPTIONAL_SECTION_OPEN); //or .addClass()
        }
    }else{
        break;  // or return false; depending on what the rest of the code expects
    } 
}

元素切换效果是否可以取决于许多元素的变化？

3 个答案:

这是一个例子