0

我正在尝试为此脚本链接找到 JQ 替代方案以查看示例问题是我想使用类而不是 ID，并且单个 div 可以有超过 1 个类，因此可以在选中 checkbox1 或 checkbox2 或两者后显示他们。知道如何使它起作用吗？

function toggle(matchingAttribute) {
    // optain all div elements in the page
    var divArray = document.getElementsByTagName("div");
      for(i=divArray.length-1; i>=0; i--) {  // for each div
      if(divArray[i].id.match("_"+matchingAttribute+"_")) {
        if(divArray[i].style.display != 'none') {
          divArray[i].style.display = 'none';
        }
        else {
          divArray[i].style.display = '';
        }
      }
    }
  }  // end function toggle()
4

2 回答 2

3

尝试这个

$('.chk').click(function(){
    var className = $(this).attr('data-class');
    if ($(this).is(':checked'))
    {
        $('.'+className+'').show();
    }
    else
    {
        $('.'+className+'').hide();
    }
});

小提琴

于 2013-07-19T12:55:55.863 回答
0

看起来这些示例基于三个不同的参数。位置、类型和成本

您可以使用数据属性设置复选框，然后使用类设置所有 div，以分别打开和关闭它们。

请参见下面的示例。

http://jsfiddle.net/YH5wA/1/

查询

$(document).ready(function(){
    $(".Selector").click(function(){
        var Attribute = $(this).data("attribute");
        if($(this).prop('checked'))
        {
            $(".Options div." + Attribute).show();
        }
        else
        {
            $(".Options div." + Attribute).hide();
        }
    });
});

HTML

    Location:
    <br />
    <input class="Selector" type="checkbox" checked data-attribute="nj"> NJ
    <input class="Selector" type="checkbox" checked data-attribute="ny"> NY
    <input class="Selector" type="checkbox" checked data-attribute="ct"> CT
    <br />
    Value:
    <br />
    <input class="Selector" type="checkbox" checked data-attribute="cheap"> Cheap
    <input class="Selector" type="checkbox" checked data-attribute="moderate"> Moderate
    <input class="Selector" type="checkbox" checked data-attribute="expensive"> Expensive
    <br />
    Type:
    <br />
    <input class="Selector" type="checkbox" checked data-attribute="burgers"> Burgers
    <input class="Selector" type="checkbox" checked data-attribute="pizza"> Pizza
    <input class="Selector" type="checkbox" checked data-attribute="sandwiches"> Sandwiches
    <br />
    <br />
    <br />
    <div class="Options">
        <div class="nj cheap burgers">NJ Place [Cheap Burger]</div>
        <div class="nj moderate burgers">NJ Place [Moderate Burgers]</div>
        <div class="nj expensive burgers">NJ Place [Expensive Burgers]</div>
        <div class="nj cheap pizza">NJ Place [Cheap Pizza]</div>
        <div class="nj moderate pizza">NJ Place [Moderate Pizza]</div>
        <div class="nj expensive pizza">NJ Place [Expensive Pizza]</div>
        <div class="nj cheap sandwiches">NJ Place [Cheap Sandwitches]</div>
        <div class="nj moderate sandwiches">NJ Place [Moderate Sandwitches]</div>
        <div class="nj expensive sandwiches">NJ Place [Expensive Sandwitches]</div>
        <div class="ny cheap burgers">NY Place [Cheap Burger]</div>
        <div class="ny moderate burgers">NY Place [Moderate Burgers]</div>
        <div class="ny expensive burgers">NY Place [Expensive Burgers]</div>
        <div class="ny cheap pizza">NY Place [Cheap Pizza]</div>
        <div class="ny moderate pizza">NY Place [Moderate Pizza]</div>
        <div class="ny expensive pizza">NY Place [Expensive Pizza]</div>
        <div class="ny cheap sandwiches">NY Place [Cheap Sandwitches]</div>
        <div class="ny moderate sandwiches">NY Place [Moderate Sandwitches]</div>
        <div class="ny expensive sandwiches">NY Place [Expensive Sandwitches]</div>
        <div class="ct cheap burgers">CT Place [Cheap Burger]</div>
        <div class="ct moderate burgers">CT Place [Moderate Burgers]</div>
        <div class="ct expensive burgers">CT Place [Expensive Burgers]</div>
        <div class="ct cheap pizza">CT Place [Cheap Pizza]</div>
        <div class="ct moderate pizza">CT Place [Moderate Pizza]</div>
        <div class="ct expensive pizza">CT Place [Expensive Pizza]</div>
        <div class="ct cheap sandwiches">CT Place [Cheap Sandwitches]</div>
        <div class="ct moderate sandwiches">CT Place [Moderate Sandwitches]</div>
        <div class="ct expensive sandwiches">CT Place [Expensive Sandwitches]</div>
    </div>
于 2013-07-19T13:19:06.070 回答