使用字符串数组确定显示/隐藏

Question

我有一个包含多个数组的 javascript 对象。我使用classes 和click events 来识别被点击的内容，并使用对象告诉DOM 显示什么。

有问题的对象看起来像这样（简化）：

  var inputSelection = {
    account : ["registration","password"],
    device : ["forceStop","clearData"]
  };

让我们假设我们有这样的 HTML：

<div id="reasonDiv"><fieldset><legend>Reason</legend>
      <label class="account"><input type="checkbox">Account<br /></label>
      <label class="device"><input type="checkbox" />Device<br />
</div>
<div id="context"><fieldset><legend>Context</legend>
      <label class="clearData"><input type="checkbox">Clear Data<br /></label>
      <label class="forceStop"><input type="checkbox" />Force Stop<br />
      <label class="registration"><input type="checkbox">Registration<br /></label>
      <label class="password"><input type="checkbox" />Password<br /></label></fieldset>
</div>

本质上，我希望能够在单击 Account 时找到对象的 account 数组中的所有值。

当点击设备时，也可​​以访问device数组中的值。

我试过这个特殊的代码：

  $('#reasonDiv label').on('click', function(){
    node1 = $(this).attr('class');
    $.each( inputSelection[node1], function( intValue, currentElement ) {
      $('div#context').each('label', function(){
        if($(this).attr('class') === currentElement){
          $(this).show();
        }
      });
    });
  });

我认为我只是错误地嵌套了 each 函数，因为我在 console 中不断收到这个奇怪的错误说：

TypeError: c.apply is not a function @ jquery.min.js:2

目标是单击一个复选框，并显示关联数组中包含 any 类的所有项目。

我在这里错过了什么？

http://jsfiddle.net/66y3E/1/

Answer 1

这是一个简单的解决方案：

http://jsfiddle.net/73v48/1/

JavaScript：

$(function() {
    var node1;

    $('#reasonDiv input').on('click', function() {
        var anyChecked = false;
        $('#reasonDiv input').each(function() {
            var isChecked = $(this).is(':checked');

            anyChecked |= isChecked;
            node1 = $(this).attr('class');
            console.log($(this), isChecked);

            if (isChecked) {
                $('.data-'+node1).show();
            } else {
                $('.data-'+node1).hide();
            }
        });

        if (anyChecked) {
            $('#context').show();
        } else {
            $('#context').hide();
        }
    });
});

我们可以通过使用类而不是关联数组来实现这一点。

Answer 2

由于标签格式错误，您的 HTML 有点混乱，事件多次触发。此外，您使用了错误类型的比较器。 === 不起作用。

演示：http://jsfiddle.net/robschmuecker/TJF65/

HTML：

<div id="reasonDiv">
    <fieldset>
        <legend>Reason For Contact</legend>
        <input type="checkbox" />
        <label class="account">Account</label>
        <br />
        <input type="checkbox" />
        <label class="device">Device</label>
        <br />
    </fieldset>
</div>
<div id="context">
    <fieldset>
        <legend>Context</legend>
        <div class="clearData">
            <input type="checkbox" />
            <label>Clear Data</label>
        </div>
        <br />
        <div class="forceStop">
            <input type="checkbox" />
            <label>Force Stop</label>
        </div>
        <br />
        <div class="registration">
            <input type="checkbox" />
            <label>Registration</label>
        </div>
        <br />
        <div class="password">
            <input type="checkbox" />
            <label>Password</label>
        </div>
        <br />
    </fieldset>
</div>

Javascript：

 var inputSelection = {
        account: ["registration", "password"],
        device: ["forceStop", "clearData"]
    };
    var node1;

    $('#reasonDiv label').on('click', function (event) {
        console.log(event);
        node1 = $(this).attr('class');
        $.each(inputSelection[node1], function (intValue, currentElement) {
            $('div#context div').each(function () {
                if ($(this).attr('class') == currentElement) {
                    $(this).show();
                    console.log('showing');
                }
            });
        });
    });

Answer 3

由于 inputSelection 是一个常规数组，因此使用 for 循环而不是 .each 搜索它

$('#reasonDiv label').on('click', function(){
    //the following code would not allow multiple classes on the element
    var node1 = $(this).attr('class');
    var arr = inputSelection[node1];

    //note: you likely need some logic here to hide existing elements

    for(var i=0; i<arr.length; i++) {
        var currentElement = arr[i];
        //convert currentElement into a selector
        $('div#context').find("."+currentElement).show();
    }
});

另一个建议，考虑使用您的输入字段为您的 搜索。

<div id="reasonDiv"><fieldset><legend>Reason</legend>
  <label class="account"><input name="search" type="radio" value="Account">Account<br /></label>
  <label class="device"><input name="search" type="radio" value="Device"/>Device<br />
</div>

var node1 = $("input[name=search]:checked").val();