勾选复选框时隐藏div

Question

我希望能够在应用过滤器时隐藏某些div（db查询结果），例如：Fiddle Example 1 | Fiddle Example 2

所有结果都应在页面加载时显示。使用价格和食物的复选框，如果选择price = high和food = pizza，则会显示相应的结果并隐藏其余结果。

Filter by price: High | Low 
Filter by food: Pizza | Pasta

<div class="new">Price: Low , Type: Pasta </div>
<div class="new">Price: Low , Type: Pasta </div>
<div class="new">Price: High , Type: Pasta </div>
<div class="new">Price: Low , Type: Pizza </div>
<div class="new">Price: High , Type: Pizza </div>

Answer 1

简单应该给每个元素额外的属性，如

public class ExampleButton extends Button
{
    public String exampleString

    public IconButton(Skin skin, String exampleString)
    {
        super(skin);
        this.exampleString = exampleString;
    }
}

        //add this where needed
        addListener(new ClickListener()
        {
            @Override
            public boolean clicked(InputEvent event, float x, float y)
            {
                //grabs a reference to the button from the event it fired
                Actor target = event.getTarget();
                //cast Actor into ExampleButton to access its contents
                ExampleButton btn = (ExampleButton)target;
                System.out.println(btn.exampleString);
                return true
            }
        });

然后像那样应用jQuery

<div class="new" price='10' foodtype='pasta'>Price: Low , Type: Pasta </div>
<div class="new" price='25' foodtype='Pasta'>Price: Low , Type: Pasta </div>
<div class="new" price='35' foodtype='Pasta'>Price: High , Type: Pasta </div>
<div class="new" price='45' foodtype='Pizza'>Price: Low , Type: Pizza </div>
<div class="new" price='25' foodtype='Pizza'>Price: High , Type: Pizza </div>

这些变量将保留对特定食物的参考。现在应用简单的jQuery show和hide。

确保您的元素属性与标准属性不冲突。