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数组中的所有值。

或者，当点击设备时，可以访问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

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

我在这里缺少什么？

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

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

3 个答案: